/* Kodeval Interactive. La identidad sale del chevron de píxeles: esquinas
   rectas, el rojo en tres tonos sobre una pantalla casi negra, Unbounded en
   los títulos y DM Mono para lo que en un juego sería el HUD. Cada juego
   conserva su paleta en su sección, ajustada a 7:1 donde hay texto chico. */

@font-face {
  font-family: "Inter";
  src: url("/Fonts/Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("/Fonts/Unbounded-Variable.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "DM-Mono";
  src: url("/Fonts/DMMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM-Mono";
  src: url("/Fonts/DMMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* La pantalla: un negro tibio, con el rojo adentro. Nunca negro puro. */
  --ki-pantalla: #110C0D;
  --ki-superficie: #1C1416;
  --ki-linea: rgba(243, 236, 236, 0.16);
  --ki-texto: #F3ECEC;          /* 16,6:1 */
  --ki-texto-2: #BDB2B3;        /* 9,4:1 */
  --ki-rojo-texto: #FF8A90;     /* 8,6:1: enlaces y acentos */
  /* Los tres rojos del chevron: solo en gráficos y botones. */
  --ki-pixel-oscuro: #8B0001;
  --ki-pixel: #D0121F;
  --ki-pixel-claro: #FF6B73;
  --ki-boton: #FF8A90;
  --ki-boton-borde: #D0121F;
  --ki-boton-texto: #110C0D;
  --ki-foco: var(--ki-texto);
  /* El arranque es igual en los dos modos: la pantalla oscura. */
  --ki-arranque-fondo: #110C0D;
  --ki-arranque-texto: #BDB2B3;  /* 9,4:1 */
  --ki-arranque-linea: rgba(243, 236, 236, 0.32);
  /* Los paisajes y los logos cambian con el tema: de noche, el atardecer y la
     noche; de día, la mañana y la tarde. */
  --ki-hero-cielo: url("/assets/paisaje-atardecer-cielo.svg");
  --ki-hero-1: url("/assets/paisaje-atardecer-1.svg");
  --ki-hero-2: url("/assets/paisaje-atardecer-2.svg");
  --ki-hero-3: url("/assets/paisaje-atardecer-3.svg");
  --ki-pie-cielo: url("/assets/paisaje-noche-cielo.svg");
  --ki-pie-1: url("/assets/paisaje-noche-1.svg");
  --ki-pie-2: url("/assets/paisaje-noche-2.svg");
  --ki-pie-3: url("/assets/paisaje-noche-3.svg");
  --ki-ver-oscuro: inline-block;
  --ki-ver-claro: none;
  color-scheme: dark;

  --fut-fondo: #06100C;
  --fut-texto: #EAF3ED;
  --fut-suave: #B9CCC1;
  --fut-acento: #FF6A1F;
  --fut-acento-texto: #FF9A5C;
  --fut-boton: #FF8A4A;
  --fut-boton-borde: #C24A0E;
  --fut-boton-texto: #1A0A02;

  --nms-fondo: #0B0506;
  --nms-texto: #FFF2C0;
  --nms-suave: #E6D7A8;
  --nms-rojo: #FF1A1A;
  --nms-oro: #FFD700;
  --nms-oro-borde: #A68C00;

  --pk-fondo: #FFF6EC;
  --pk-texto: #1A1A2E;
  --pk-suave: #3A3A52;
  --pk-rosa: #C8006B;
  --pk-rosa-texto: #A1004F;
  --pk-verde: #0B5C27;
  --pk-boton-borde: #000014;

  --ancho: 1200px;
  --margen: clamp(16px, 4vw, 40px);
  --pixel: 4px;
}

/* Modo claro: de día. Se elige con el botón del header (data-tema, que se
   aplica antes de pintar) o, si nunca se tocó, sale del sistema. Los juegos
   conservan su paleta en los dos modos. */
:root[data-tema="claro"] {
  --ki-pantalla: #F5EDEB;
  --ki-superficie: #EBE0DE;
  --ki-linea: rgba(26, 17, 18, 0.18);
  --ki-texto: #1A1112;          /* 14,3:1 sobre la superficie */
  --ki-texto-2: #45383A;        /* 8,6:1 */
  --ki-rojo-texto: #8E0A14;     /* 7,4:1 */
  --ki-boton: #8E0A14;
  --ki-boton-borde: #4F0006;
  --ki-boton-texto: #FFFFFF;    /* 9,5:1 */
  --ki-hero-cielo: url("/assets/paisaje-manana-cielo.svg");
  --ki-hero-1: url("/assets/paisaje-manana-1.svg");
  --ki-hero-2: url("/assets/paisaje-manana-2.svg");
  --ki-hero-3: url("/assets/paisaje-manana-3.svg");
  --ki-pie-cielo: url("/assets/paisaje-tarde-cielo.svg");
  --ki-pie-1: url("/assets/paisaje-tarde-1.svg");
  --ki-pie-2: url("/assets/paisaje-tarde-2.svg");
  --ki-pie-3: url("/assets/paisaje-tarde-3.svg");
  --ki-ver-oscuro: none;
  --ki-ver-claro: inline-block;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --ki-pantalla: #F5EDEB;
    --ki-superficie: #EBE0DE;
    --ki-linea: rgba(26, 17, 18, 0.18);
    --ki-texto: #1A1112;          /* 14,3:1 sobre la superficie */
    --ki-texto-2: #45383A;        /* 8,6:1 */
    --ki-rojo-texto: #8E0A14;     /* 7,4:1 */
    --ki-boton: #8E0A14;
    --ki-boton-borde: #4F0006;
    --ki-boton-texto: #FFFFFF;    /* 9,5:1 */
    --ki-hero-cielo: url("/assets/paisaje-manana-cielo.svg");
    --ki-hero-1: url("/assets/paisaje-manana-1.svg");
    --ki-hero-2: url("/assets/paisaje-manana-2.svg");
    --ki-hero-3: url("/assets/paisaje-manana-3.svg");
    --ki-pie-cielo: url("/assets/paisaje-tarde-cielo.svg");
    --ki-pie-1: url("/assets/paisaje-tarde-1.svg");
    --ki-pie-2: url("/assets/paisaje-tarde-2.svg");
    --ki-pie-3: url("/assets/paisaje-tarde-3.svg");
    --ki-ver-oscuro: none;
    --ki-ver-claro: inline-block;
    color-scheme: light;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body {
  background: var(--ki-pantalla);
  color: var(--ki-texto);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ki-foco); outline-offset: 3px; }

h1, h2, h3 { font-family: "Unbounded", system-ui, sans-serif; font-weight: 700; }
.hud { font-family: "DM-Mono", ui-monospace, monospace; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }

.saltar {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 12px 18px;
  background: var(--ki-texto);
  color: var(--ki-pantalla);
  font-weight: 600;
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

/* El punto de los títulos es un píxel. */
.punto {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.05em;
  background: var(--ki-pixel);
}

/* ---------- Botones: rectos, con el escalón de abajo que se hunde al apretar ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 20px;
  border-bottom: var(--pixel) solid var(--ki-boton-borde);
  background: var(--ki-boton);
  color: var(--ki-boton-texto);
  font-family: "DM-Mono", ui-monospace, monospace;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.08s, border-bottom-width 0.08s;
}
.boton:active { transform: translateY(var(--pixel)); border-bottom-width: 0; margin-bottom: var(--pixel); }
.boton-linea {
  background: transparent;
  color: var(--ki-texto);
  border: 1px solid var(--ki-linea);
  border-bottom: var(--pixel) solid var(--ki-linea);
}
.accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: "DM-Mono", ui-monospace, monospace;
  font-weight: 500;
  color: var(--ki-rojo-texto);
  text-decoration: none;
}
.accion:hover { text-decoration: underline; }

/* ---------- Arranque ---------- */
/* Tapa la página mientras corre la animación de entrada. Va siempre sobre la
   pantalla oscura, como el arranque de un juego, también en modo claro.
   Primero el ícono de carga y, con la página lista, la entrada corta, que
   sigue desde el mismo chevron. Solo existe si
   el script la encendió (con-arranque). */
.arranque { display: none; }
.con-arranque { overflow: hidden; }
.con-arranque .arranque {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--ki-arranque-fondo);
  cursor: pointer;
  transition: opacity 0.4s;
}
.arranque img { grid-area: 1 / 1; }
/* El ícono de carga tapa justo al chevron grande con que arranca la entrada:
   mismo lugar y mismo tamaño (0,2041 del ancho de la entrada, lo calcula
   entrada.py). */
.arranque-carga { width: calc(min(100vw, 100vh * 16 / 9) * 0.2041); height: auto; }
.arranque-logo { display: none; width: min(100vw, 100vh * 16 / 9); height: auto; }
.arranque-listo .arranque-carga { display: none; }
.arranque-listo .arranque-logo { display: block; }
.arranque-saliendo { opacity: 0; }
.arranque-saltar {
  position: absolute;
  right: var(--margen);
  bottom: var(--margen);
  min-width: 44px;
  min-height: 44px;
  padding: 8px 16px;
  background: transparent;
  color: var(--ki-arranque-texto);
  border: 1px solid var(--ki-arranque-linea);
  font: 500 0.92rem "DM-Mono", ui-monospace, monospace;
  cursor: pointer;
}
.arranque-saltar:hover { border-color: var(--ki-arranque-texto); }
.arranque-saltar:focus-visible { outline-color: var(--ki-arranque-texto); }

/* ---------- Header ---------- */
.cabecera { border-bottom: 1px solid var(--ki-linea); }
.cabecera .envoltura { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.cabecera-logo { display: flex; align-items: center; flex-shrink: 0; min-height: 44px; }
.cabecera-logo img { height: 26px; width: auto; }
.nav { display: flex; margin-left: auto; }
.nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-family: "DM-Mono", ui-monospace, monospace;
  font-size: 0.92rem;
  color: var(--ki-texto-2);
  text-decoration: none;
}
.nav a:hover { color: var(--ki-texto); }
.cabecera .boton { flex-shrink: 0; min-height: 44px; }
.cabecera-cuenta { white-space: nowrap; }
.tema-boton {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  color: var(--ki-texto);
  border: 1px solid var(--ki-linea);
  cursor: pointer;
}
.tema-boton:hover { border-color: var(--ki-texto-2); }
.cabecera-cuenta svg { display: none; }

/* ---------- Paisajes ---------- */
/* El cielo queda quieto y las tres cordilleras pasan de costado, cada una más
   rápido que la de atrás, como el fondo de un juego de plataformas. Avanzan de
   a un píxel del dibujo por vez (steps), así los bordes siguen nítidos. Una
   baldosa de montañas mide 192 × 72 píxeles: a la altura del paisaje, su ancho
   es --alto × 8 / 3, y cada capa recorre exactamente una baldosa por vuelta
   para empalmar sin salto. El movimiento arranca solo cuando el script pone
   el botón de pausa. */
.paisaje {
  position: relative;
  overflow: hidden;
  height: var(--alto);
  background-position: center bottom;
  background-size: max(100%, calc(var(--alto) * 8)) 100%;
  background-repeat: no-repeat;
}
.paisaje-capa {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + var(--alto) * 8 / 3);
  background-position: left bottom;
  background-size: auto 100%;
  background-repeat: repeat-x;
}
.paisaje-capa:nth-child(1) { --vuelta: 96s; }
.paisaje-capa:nth-child(2) { --vuelta: 48s; }
.paisaje-capa:nth-child(3) { --vuelta: 32s; }
.hero-paisaje { background-image: var(--ki-hero-cielo); }
.hero-paisaje .paisaje-capa:nth-child(1) { background-image: var(--ki-hero-1); }
.hero-paisaje .paisaje-capa:nth-child(2) { background-image: var(--ki-hero-2); }
.hero-paisaje .paisaje-capa:nth-child(3) { background-image: var(--ki-hero-3); }
.pie-paisaje { background-image: var(--ki-pie-cielo); }
.pie-paisaje .paisaje-capa:nth-child(1) { background-image: var(--ki-pie-1); }
.pie-paisaje .paisaje-capa:nth-child(2) { background-image: var(--ki-pie-2); }
.pie-paisaje .paisaje-capa:nth-child(3) { background-image: var(--ki-pie-3); }
@keyframes ki-cordillera {
  to { transform: translateX(calc(var(--alto) * -8 / 3)); }
}
.con-movimiento .paisaje-capa { animation: ki-cordillera var(--vuelta) steps(192) infinite; }
.movimiento-pausado .paisaje-capa { animation-play-state: paused; }

.paisaje-pausa {
  position: absolute;
  top: 12px;
  right: var(--margen);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--ki-pantalla);
  color: var(--ki-texto);
  border: 2px solid var(--ki-linea);
  cursor: pointer;
}
.paisaje-pausa:hover { border-color: var(--ki-texto-2); }
.paisaje-pausa .icono-seguir,
.movimiento-pausado .paisaje-pausa .icono-pausa { display: none; }
.movimiento-pausado .paisaje-pausa .icono-seguir { display: block; }

/* ---------- Hero: la pantalla de elegir juego ---------- */
.hero { padding-bottom: clamp(56px, 8vw, 104px); }
/* El fondo de Interactive: un paisaje en pixel art, como la bandera de Pages
   y los degradés de Kodeval. Va en su propia franja, debajo del texto, para que
   el sol y las montañas nunca queden detrás de una letra; en pantallas
   angostas se recorta por los costados. */
.hero-escena { padding-top: clamp(48px, 8vw, 96px); }
/* El texto y los juegos se montan sobre el borde del paisaje: van por encima. */
.hero-escena .envoltura { position: relative; z-index: 1; }
.hero-paisaje {
  --alto: clamp(200px, 30vw, 420px);
  margin-top: clamp(-40px, -2vw, -8px);
}
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  max-width: 12ch;
}
.hero-texto { margin-top: 20px; max-width: 52ch; font-size: 1.1rem; color: var(--ki-texto-2); }

.selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  margin-top: clamp(-72px, -4vw, -24px);
  position: relative;
  z-index: 1;
}
.cartucho {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  border: 1px solid var(--ki-linea);
}
.cartucho > img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.cartucho-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.cartucho-nombre {
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
}
/* El cursor del menú: el chevron aparece junto al juego elegido. */
.cursor { display: inline-block; vertical-align: -0.1em; margin-left: 10px; width: 14px; height: auto; opacity: 0; transform: translateX(6px); transition: opacity 0.12s, transform 0.12s; }
.cartucho:hover .cursor, .cartucho:focus-visible .cursor { opacity: 1; transform: none; }
.cartucho-genero { font-size: 0.95rem; }
.cartucho-tecla { margin-top: auto; padding-top: 12px; font-size: 0.88rem; }
.cartucho-tecla kbd {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-bottom-width: 3px;
  font-family: inherit;
}

.cartucho-fut { background: var(--fut-fondo); color: var(--fut-texto); }
.cartucho-fut .cartucho-nombre em { font-style: normal; color: var(--fut-acento); }
.cartucho-fut .cartucho-genero { color: var(--fut-suave); }
.cartucho-fut .cartucho-tecla { color: var(--fut-acento-texto); }
.cartucho-nms { background: var(--nms-fondo); color: var(--nms-texto); }
.cartucho-nms .cartucho-nombre { color: var(--nms-rojo); text-transform: uppercase; }
.cartucho-nms .cartucho-genero { color: var(--nms-suave); }
.cartucho-nms .cartucho-tecla { color: var(--nms-oro); }
.cartucho-pk { background: var(--pk-fondo); color: var(--pk-texto); --ki-foco: var(--pk-texto); }
.cartucho-pk .cartucho-nombre { color: var(--pk-rosa); }
.cartucho-pk .cartucho-genero { color: var(--pk-suave); }
.cartucho-pk .cartucho-tecla { color: var(--pk-rosa-texto); }

/* ---------- Juegos ---------- */
.juego { padding: clamp(64px, 9vw, 112px) 0; }
.juego .envoltura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 40px 64px;
  align-items: center;
}
.juego-invertido .juego-texto { order: 2; }
.juego h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: 12px; }
.juego-genero { font-size: 0.95rem; margin-bottom: 18px; }
.juego-desc { max-width: 54ch; }
.juego-estado { margin-top: 18px; font-size: 0.92rem; }
.juego-avisos { margin-top: 14px; font-size: 0.92rem; }
.juego-avisos li { padding-left: 18px; position: relative; }
.juego-avisos li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: currentColor; }
.juego-acciones { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 28px; }
.juego-medio img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

.juego-fut { background: var(--fut-fondo); color: var(--fut-texto); --ki-foco: var(--fut-texto); }
.juego-fut h2 em { font-style: normal; color: var(--fut-acento); }
.juego-fut .juego-genero, .juego-fut .juego-estado { color: var(--fut-acento-texto); }
.juego-fut .juego-desc { color: var(--fut-suave); }
.juego-fut .boton { background: var(--fut-boton); border-bottom-color: var(--fut-boton-borde); color: var(--fut-boton-texto); }
.juego-fut .juego-medio { outline: 1px solid rgba(255, 106, 31, 0.4); }

.juego-nms { background: var(--nms-fondo); color: var(--nms-texto); --ki-foco: var(--nms-texto); }
.juego-nms h2 { color: var(--nms-rojo); text-transform: uppercase; }
.juego-nms .juego-genero, .juego-nms .juego-estado { color: var(--nms-oro); }
.juego-nms .juego-desc, .juego-nms .juego-avisos { color: var(--nms-suave); }
.juego-nms .boton { background: var(--nms-oro); border-bottom-color: var(--nms-oro-borde); color: var(--nms-fondo); }
.juego-nms .juego-medio { outline: 2px solid var(--nms-rojo); }

.juego-pk { background: var(--pk-fondo); color: var(--pk-texto); --ki-foco: var(--pk-texto); }
.juego-pk h2 { color: var(--pk-rosa); }
.juego-pk .juego-genero { color: var(--pk-rosa-texto); }
.juego-pk .juego-estado { color: var(--pk-verde); }
.juego-pk .juego-desc, .juego-pk .juego-avisos { color: var(--pk-suave); }
.juego-pk .boton { background: var(--pk-texto); border-bottom-color: var(--pk-boton-borde); color: #fff; }
.juego-pk .accion { color: var(--pk-rosa-texto); }

/* ---------- Secciones de la pantalla ---------- */
.seccion { padding: clamp(64px, 9vw, 112px) 0; }
.seccion h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 14px; }
.seccion-intro { max-width: 56ch; margin-bottom: 40px; color: var(--ki-texto-2); }

.sellos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); }
.sello { padding: 28px; border: 1px solid var(--ki-linea); border-top: var(--pixel) solid var(--ki-pixel); }
.sello h3 { font-size: 1.5rem; line-height: 1.15; margin-bottom: 10px; }
.sello p { color: var(--ki-texto-2); }
.sello .hud { margin-top: 16px; color: var(--ki-rojo-texto); }

.registro { border-top: 1px solid var(--ki-linea); }
.entrada {
  display: grid;
  grid-template-columns: 130px 170px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ki-linea);
}
.entrada time, .entrada .de { font-size: 0.88rem; color: var(--ki-texto-2); }
.entrada .de { color: var(--ki-rojo-texto); }
.entrada h3 { font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 1.08rem; line-height: 1.35; }
.entrada p { color: var(--ki-texto-2); font-size: 0.95rem; margin-top: 4px; }
.seccion-pie { margin-top: 16px; }

.cuenta { background: var(--ki-superficie); border-top: var(--pixel) solid var(--ki-pixel-oscuro); }
.cuenta .envoltura { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 24px 48px; align-items: center; }
.cuenta p { color: var(--ki-texto-2); max-width: 60ch; }
.cuenta-acciones { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }

/* ---------- Notas del parche ---------- */
/* Cada juego en su paleta, como en la portada: el nombre y el botón quedan
   fijos al costado mientras se leen los parches, de la fecha al detalle. */
/* El mismo paisaje que la portada, debajo del título; el índice de juegos se
   monta sobre su borde, como los cartuchos. */
.notas-cabeza { padding-top: clamp(48px, 8vw, 96px); }
.notas-cabeza .envoltura { position: relative; z-index: 1; padding-bottom: clamp(32px, 5vw, 64px); }
.notas-cabeza h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.notas-cabeza p { margin-top: 20px; max-width: 56ch; font-size: 1.1rem; color: var(--ki-texto-2); }

.notas-indice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
  position: relative;
  z-index: 1;
  margin-top: clamp(-72px, -4vw, -24px);
  margin-bottom: clamp(56px, 8vw, 104px);
}
.notas-indice a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--ki-linea);
  text-decoration: none;
}
.notas-indice-nombre { font-family: "Unbounded", system-ui, sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.notas-indice .hud { font-size: 0.85rem; }
.notas-indice-fut { background: var(--fut-fondo); color: var(--fut-suave); --ki-foco: var(--fut-texto); }
.notas-indice-fut .notas-indice-nombre { color: var(--fut-texto); }
.notas-indice-fut em { font-style: normal; color: var(--fut-acento); }
.notas-indice-nms { background: var(--nms-fondo); color: var(--nms-suave); --ki-foco: var(--nms-texto); }
.notas-indice-nms .notas-indice-nombre { color: var(--nms-rojo); text-transform: uppercase; }
.notas-indice-pk { background: var(--pk-fondo); color: var(--pk-suave); --ki-foco: var(--pk-texto); }
.notas-indice-pk .notas-indice-nombre { color: var(--pk-rosa); }
.notas-indice a:hover .notas-indice-nombre { text-decoration: underline; }

.notas-juego { padding: clamp(56px, 8vw, 104px) 0; }
.notas-juego.juego-fut { --notas-suave: var(--fut-suave); --notas-acento: var(--fut-acento-texto); }
.notas-juego.juego-nms { --notas-suave: var(--nms-suave); --notas-acento: var(--nms-oro); }
.notas-juego.juego-pk { --notas-suave: var(--pk-suave); --notas-acento: var(--pk-rosa-texto); }
.notas-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 32px 64px;
  align-items: start;
}
.notas-lado { position: sticky; top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.notas-lado h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.03em; }
.notas-lado .hud { color: var(--notas-acento); font-size: 0.92rem; }
.notas-juego .boton { margin-top: 6px; }

.parche {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 6px 24px;
  padding: 28px 0;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.parche:first-child { border-top: 0; padding-top: 0; }
.parche time { padding-top: 0.3em; font-size: 0.88rem; color: var(--notas-acento); }
.parche h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; }
.parche h4 { margin-top: 20px; font-weight: 500; font-size: 0.92rem; color: var(--notas-acento); }
.parche p, .parche li { color: var(--notas-suave); }
.parche p { margin-top: 10px; max-width: 64ch; }
.parche ul { margin-top: 10px; display: grid; gap: 8px; max-width: 64ch; }
.parche li { position: relative; padding-left: 18px; }
.parche li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; background: currentColor; }

/* ---------- Pie ---------- */
/* La misma estructura que el pie de Kodeval Pages: la firma de Kodeval y las
   redes, las tres columnas y los legales abajo. Arriba, el paisaje de noche
   (o de tarde, en modo claro), que cierra la página como el atardecer o la
   mañana la abren. */
.pie { font-size: 0.92rem; }
.pie-paisaje { --alto: clamp(150px, 24vw, 320px); }
.pie .envoltura { padding-top: 8px; padding-bottom: 40px; }
.pie a { text-decoration: none; }
.pie hr { border: 0; border-top: 1px solid var(--ki-linea); margin: 32px 0; }

.pie-arriba { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.pie-firma { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ki-texto-2); }
.pie-firma:hover { color: var(--ki-texto); }
.pie-corazon { display: inline-block; height: 1.05em; width: auto; vertical-align: -0.12em; }
.pie-kodeval { height: 24px; width: auto; }
.pie-redes { display: flex; margin-right: -13px; /* el ícono queda alineado al borde aunque el área sea de 44 px */ }
.pie-redes a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ki-texto-2); }
.pie-redes a:hover { color: var(--ki-texto); }

.pie-enlaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pie-enlaces h2 { font-family: "DM-Mono", ui-monospace, monospace; font-weight: 500; font-size: 0.9rem; color: var(--ki-texto); margin-bottom: 6px; }
.pie-enlaces a { display: flex; align-items: center; min-height: 40px; color: var(--ki-texto-2); }
.pie-enlaces a:hover { color: var(--ki-texto); }

.pie-abajo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; font-size: 0.85rem; color: var(--ki-texto-2); }
.pie-legal { display: flex; gap: 8px 20px; }
.pie-legal a { display: flex; align-items: center; min-height: 44px; color: var(--ki-texto-2); }
.pie-legal a:hover { color: var(--ki-texto); }

/* ---------- Tamaños ---------- */
@media (max-width: 960px) {
  .selector { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  /* En una columna la captura ya aparece en la sección de cada juego: el selector queda como menú. */
  .cartucho > img { display: none; }
  .juego .envoltura, .cuenta .envoltura, .sellos { grid-template-columns: minmax(0, 1fr); }
  .juego-invertido .juego-texto { order: 0; }
  .entrada { grid-template-columns: minmax(0, 1fr); }
  .notas-indice, .notas-rejilla { grid-template-columns: minmax(0, 1fr); }
  .notas-lado { position: static; }
}
@media (max-width: 960px) {
  .nav { display: none; }
  .cabecera .boton, .tema-boton { margin-left: auto; }
}
/* El botón de tema y el de la cuenta van juntos, más cerca entre sí. */
.tema-boton + .cabecera-cuenta { margin-left: -12px; }
@media (max-width: 640px) {
  .pie-enlaces { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .parche { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .cabecera .envoltura { gap: 16px; }
  .cabecera-logo img { height: 20px; }
  .tema-boton + .cabecera-cuenta { margin-left: -8px; }
  .cabecera-cuenta { width: 48px; padding: 0; justify-content: center; }
  .cabecera-cuenta svg { display: block; }
  .cabecera-cuenta span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
}

/* En los celulares más angostos el logo ocupa todo el header: la cuenta
   queda en su sección, más abajo. */
@media (max-width: 380px) {
  .cabecera .boton { display: none; }
}

/* Los logos que tienen versión para cada modo. Van al final para ganarles a
   las reglas de tamaño de cada logo. */
.solo-oscuro { display: var(--ki-ver-oscuro); }
.solo-claro { display: var(--ki-ver-claro); }

@media (prefers-reduced-motion: reduce) {
  .boton, .cursor { transition: none; }
  .boton:active { transform: none; }
  .con-movimiento .paisaje-capa { animation: none; }
  .paisaje-pausa { display: none; }
}