/* =====================================================================
   KIRA · estilos base · identidad v1 (13 oct 2026, guía web/guia-estetica-v1.md, P-094)
   Tres materias, tres dueños:
     violeta  = la ciudad: base de la interfaz (bordes, paneles, fondos)
     verde    = Kira (#B6FF1A): solo acentos (hallazgos, CTA, puntas del logo). Brillo solo como recompensa
     hueso    = el sistema: texto y datos, frío y sin carga política
   Tipografía (autoalojada en fonts/, OFL):
     --font-display  Syne (variable 400-800): sans ancha y afilada para titulares y botones
     --font-mono     IBM Plex Mono 300/400/500: datos, terminal, etiquetas
     --font-zh       Noto Sans SC (subconjunto de los caracteres del sitio)
   La capa de componentes de la identidad v1 está en css/kira-v1.css (se carga la última).
   ===================================================================== */
@font-face { font-family: "Syne"; src: url("../fonts/Syne-Var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
/* el 3D (mundo.bundle.js, que no se toca aquí) pide «JetBrains Mono» en sus lienzos: el nombre apunta a Plex Mono */
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 100 450; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 451 900; font-display: swap; }
@font-face { font-family: "Noto Sans SC"; src: url("../fonts/NotoSansSC-sub.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --negro:          #07050D;
  --platino:        #ECE5D6;  /* blanco hueso: texto principal */
  --hueso:          #ECE5D6;
  --plata:          #B3ABC2;  /* secundarios (≈ 9:1 sobre --negro) */
  --teja:           #B4503A;  /* agotado */
  --teja-texto:     #E48A72;
  --violeta:        #7440FF;  /* la ciudad */
  --violeta-hondo:  #24104F;  /* rellenos en reposo: secos */
  --violeta-sombra: #160A33;
  --violeta-texto:  #A88BFF;  /* violeta para texto pequeño (≈ 7:1) */
  --gusano:         #B6FF1A;  /* Kira */
  --rio:            #7440FF;
  --panel:          #0D0918;
  --linea:          rgba(236, 229, 214, .14);

  --font-zh: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-reserva: "Syne", "Segoe UI", system-ui, sans-serif;
  --font-display: "Syne", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "SF Mono", Menlo, monospace, var(--font-zh);
  --font-texto: "Syne", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tracking: .08em;

  --cab: 56px;
  --aviso: 30px;
  --margen-final: 28px;
  --chaflan: none;       /* v1: sin chaflanes; las esquinas llevan remate de espina (kira-v1.css) */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--negro); color: var(--platino);
  font: 16px/1.55 var(--font-texto);
  padding-bottom: calc(var(--aviso) + var(--margen-final));
  min-height: 100vh;
}
body.con-ficha { overflow: hidden; }
body[data-vista="mapa"] { padding-bottom: var(--aviso); }
img { max-width: 100%; display: block; }
a { color: var(--violeta-texto); }
a:hover { color: var(--platino); }
:focus-visible { outline: 2px solid var(--gusano); outline-offset: 3px; }
[hidden] { display: none !important; }

.display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking); font-weight: 400; line-height: 1.08; }
.display.reserva, .reserva { font-family: var(--font-reserva); font-stretch: condensed; font-weight: 700; letter-spacing: .06em; }
.glitch-sombra { text-shadow: -2px 0 var(--violeta), 3px 1px var(--violeta-sombra); }
.mono { font-family: var(--font-mono); letter-spacing: 0; }
.sec { color: var(--plata); }
.kicker { color: var(--violeta-texto); font: 12px/1.2 var(--font-display); letter-spacing: .04em; margin: 0 0 8px; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--gusano); color: var(--negro); padding: 8px 12px; z-index: 50; }
.saltar:focus { left: 8px; }

/* ===== Cabecera ===== */
.cabecera {
  position: sticky; top: 0; z-index: 20; height: var(--cab);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px; background: var(--negro); border-bottom: 1px solid var(--violeta);
}
.logo { color: var(--platino); text-decoration: none; display: flex; flex-direction: column; gap: 4px; }
.logo img { height: 22px; width: auto; }
.logo-sub { font: 8px/1 var(--font-mono); letter-spacing: .12em; color: var(--plata); white-space: nowrap; }
.nav { display: flex; gap: 0; }
.nav a {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  font-size: 11px; color: var(--plata); text-decoration: none; padding: 8px 4px; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a[aria-current="page"] { color: var(--platino); border-bottom-color: var(--violeta); }
.nav a:hover { color: var(--violeta-texto); }

/* ===== Portada mapa ===== */
.vista-mapa { position: relative; height: calc(100vh - var(--cab) - var(--aviso)); height: calc(100dvh - var(--cab) - var(--aviso)); min-height: 480px; overflow: hidden; }
.mapa-lienzo { position: absolute; inset: 0; touch-action: none; cursor: grab; outline: none; overflow: hidden; }
.mapa-lienzo.arrastrando { cursor: grabbing; }
.mapa-lienzo:focus-visible { box-shadow: inset 0 0 0 2px var(--gusano); }
#mapa { display: block; width: 100%; height: 100%; }
/* titular del mapa: discreto, se desvanece (js/panel.js) y no ocupa la ciudad */
.mapa-intro { position: absolute; z-index: 3; top: 0; left: 0; right: 0; padding: 10px 124px 10px 16px; pointer-events: none; transition: opacity 1.4s ease, visibility 0s 1.4s; }
.mapa-intro .kicker { display: none; }
.mapa-intro h1 { font-size: 13px; margin: 0 0 3px; letter-spacing: .08em; color: var(--platino); text-shadow: 0 0 6px var(--negro), 0 0 2px var(--negro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-intro .mapa-ayuda { margin: 0; font-size: 10.5px; line-height: 1.35; color: var(--plata); text-shadow: 0 0 4px var(--negro), 0 0 2px var(--negro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-ayuda .ayuda-larga { display: none; }
body.intro-ida .mapa-intro { opacity: 0; visibility: hidden; }

.nodos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.nodo {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
  background: none; border: 0; padding: 0; color: var(--platino); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; font: inherit;
}
.nodo-foto {
  width: 56px; height: 56px; padding: 2px; display: block; background: var(--violeta);
  clip-path: var(--chaflan);
}
.nodo-foto img, .nodo-foto .ph { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.nodo-foto .ph { display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--violeta-sombra) 0 4px, var(--negro) 4px 8px); font: 9px/1.1 var(--font-mono); color: var(--gusano); text-align: center; }
.nodo-et {
  position: absolute; top: 100%; margin-top: 5px; white-space: nowrap;
  font: 11px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  background: var(--negro); padding: 3px 5px 2px; border: 1px solid var(--violeta); border-left: 3px solid var(--gusano);
}
.nodo-et .num { color: var(--gusano); }
.nodo.preventa .nodo-foto { background: var(--gusano); }
.nodo.preventa .nodo-et { border-color: var(--gusano); }
.nodo.et-izq .nodo-et { right: -4px; }
.nodo.et-der .nodo-et { left: -4px; }
.nodo:hover .nodo-foto, .nodo:focus-visible .nodo-foto { background: var(--gusano); }
.nodo:focus-visible { outline: none; }
.nodo:focus-visible .nodo-et { outline: 2px solid var(--gusano); }
.nodo.agotado .nodo-foto { background: var(--teja); filter: grayscale(.8); }
.nodo-hq .nodo-foto { width: 28px; height: 28px; padding: 0; background: var(--plata); color: var(--negro); font: 14px/28px var(--font-display); text-align: center; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.nodo-hq .nodo-et { font-size: 9px; color: var(--plata); border-color: var(--linea); border-left-color: var(--plata); }
/* glitch puntual: lo activa mapa.js unas décimas de segundo */
.nodos.glitch .nodo-et { transform: translateX(-3px); text-shadow: -2px 0 var(--gusano), 2px 0 var(--violeta); }
.nodos.glitch .nodo:nth-child(2n) .nodo-foto { transform: translateX(4px); }

/* ===== Páginas ===== */
.vista-pagina { padding: 28px 16px 48px; max-width: 1100px; margin: 0 auto; }
.vista-pagina h1 { font-size: 36px; margin: 0 0 10px; }
.h2 { font-size: 20px; margin: 36px 0 12px; }

.rejilla-drops { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tarjeta-btn { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; width: 100%; cursor: pointer; }
.tarjeta-btn:focus-visible { outline: 2px solid var(--gusano); outline-offset: 4px; }
.tarjeta-foto { aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--linea); position: relative; display: block; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tarjeta-btn:hover img { transform: scale(1.03); }
.tarjeta-btn:hover .tarjeta-foto { border-color: var(--violeta); }
.tarjeta-meta { font-size: 11px; color: var(--violeta-texto); }
.tarjeta-titulo { font-size: 14px; }
.tarjeta-pie { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.tarjeta-pie .zh { display: none; }
@media (min-width: 760px) { .tarjeta-pie .zh { display: inline; } }
.tarjeta.agotado .tarjeta-foto img { filter: grayscale(1) brightness(.6); }
.tarjeta-foto .etiqueta { position: absolute; left: 6px; top: 6px; }
.estado-agotado { color: var(--teja-texto); font-weight: 700; }

/* marcador de imagen generada con IA (preventa sin fotos reales todavía) */
.ph-ia {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; text-align: center; font: 12px/1.4 var(--font-mono); color: var(--plata);
  background: repeating-linear-gradient(45deg, rgba(42, 0, 102, .55) 0 6px, transparent 6px 14px), var(--panel);
  border: 1px dashed var(--violeta);
}
.ph-ia b { color: var(--violeta-texto); font-weight: 700; letter-spacing: .04em; }

.rejilla-diario { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.video-marco {
  aspect-ratio: 9 / 16; border: 1px dashed var(--violeta); display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; padding: 14px 8px; font-size: 12px;
  background: repeating-linear-gradient(0deg, rgba(107, 15, 255, .07) 0 2px, transparent 2px 6px), var(--panel);
}
.play { width: 0; height: 0; border-left: 22px solid var(--violeta); border-top: 14px solid transparent; border-bottom: 14px solid transparent; opacity: .8; }
.video-pie { font-size: 11px; color: var(--plata); margin: 6px 0 0; }

.aviso-grande { border: 1px solid var(--teja); border-left-width: 4px; padding: 14px 16px; margin: 20px 0; background: rgba(181, 69, 47, .07); }
.aviso-grande p { margin: 0 0 8px; }
.aviso-grande .mono { color: var(--teja-texto); font-size: 12px; font-weight: 700; }
.bio p { max-width: 38em; }
.capas { display: grid; gap: 12px; margin: 0; }
.capas div { border: 1px solid var(--linea); padding: 12px 14px; }
.capas dt { color: var(--violeta-texto); font-size: 12px; margin-bottom: 4px; }
.capas dd { margin: 0; color: var(--plata); }

/* ===== Ficha de producto ===== */
.ficha { position: fixed; inset: 0; z-index: 30; background: rgba(7, 6, 10, .85); display: flex; justify-content: center; align-items: stretch; }
.ficha-caja {
  position: relative; width: 100%; max-width: 1100px; overflow-y: auto; background: var(--negro);
  padding: 0 0 calc(var(--aviso) + var(--margen-final)); outline: none; border-left: 1px solid var(--violeta); border-right: 1px solid var(--violeta);
}
.cerrar {
  position: sticky; top: 10px; float: right; margin: 10px 10px -54px 0; z-index: 5;
  width: 44px; height: 44px; border: 1px solid var(--violeta); background: rgba(7, 6, 10, .9);
  color: var(--platino); font-size: 26px; line-height: 1; cursor: pointer; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.cerrar:hover { background: var(--violeta); color: var(--platino); }
.ficha-rejilla { display: grid; }
.galeria-principal { margin: 0; position: relative; background: #111; }
.galeria-principal img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.galeria-principal .ph-ia { aspect-ratio: 3 / 4; height: auto; font-size: 14px; }
.galeria-principal figcaption { position: absolute; left: 10px; bottom: 10px; font-size: 12px; background: rgba(7, 6, 10, .85); padding: 3px 6px; color: var(--plata); }
.galeria-principal figcaption.ia { color: var(--platino); background: var(--violeta); font-weight: 700; }
.galeria-minis { display: flex; gap: 8px; padding: 10px 16px 0; }
.mini { padding: 0; border: 1px solid var(--linea); background: none; width: 60px; height: 80px; cursor: pointer; overflow: hidden; }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini[aria-current="true"] { border: 2px solid var(--violeta); }
.ficha-texto { padding: 18px 16px 0; }

.log {
  position: relative; border: 1px solid var(--violeta); padding: 16px 16px 12px; margin-bottom: 22px;
  background: linear-gradient(135deg, rgba(107, 15, 255, .16), rgba(42, 0, 102, .08) 60%), var(--panel);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.log-cab { color: var(--violeta-texto); font-size: 12px; margin: 0 0 10px; }
.log-texto p { margin: 0 0 10px; font-size: 17px; line-height: 1.5; font-style: italic; }
.log-pie { font-size: 12px; color: var(--plata); margin: 0; text-align: right; }

.real-cab { font-size: 11px; color: var(--plata); margin: 0 0 6px; padding-top: 8px; border-top: 1px solid var(--linea); }
.real-titulo { font-size: 24px; margin: 0 0 10px; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.etiqueta { display: inline-block; font: 700 12px/1 var(--font-mono); letter-spacing: .04em; padding: 5px 7px; }
.et-stock { color: var(--negro); background: var(--gusano); }
.et-preventa { color: var(--platino); background: var(--violeta); }
.et-quedan { color: var(--platino); border: 1px solid var(--violeta); padding: 4px 6px; }
.preventa-datos { border: 1px solid var(--violeta); border-left: 4px solid var(--violeta); padding: 10px 12px; margin: 0 0 14px; background: rgba(42, 0, 102, .25); }
.preventa-datos .datos { margin: 0; }
.pieza { border-top: 1px solid var(--linea); padding: 12px 0 4px; }
.pieza-nombre { font: 600 15px/1.3 var(--font-texto); margin: 0 0 4px; }
.pieza p { margin: 0 0 10px; color: var(--plata); font-size: 14px; }
.datos { margin: 0 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.datos div { display: flex; flex-direction: column; }
.datos dt { font: 10.5px var(--font-mono); color: var(--plata); text-transform: uppercase; letter-spacing: .04em; }
.datos dd { margin: 0; font-family: var(--font-mono); font-size: 13.5px; }
.datos-envio { border-top: 1px solid var(--linea); padding-top: 12px; margin-top: 8px; }
.hueco { color: var(--teja-texto); border: 1px dashed var(--teja-texto); padding: 0 4px; font-size: 12px; white-space: nowrap; }
.legal { margin: 14px 0 4px; padding: 10px 12px; border: 1px dashed var(--plata); font-size: 13px; color: var(--plata); }
.legal h3 { margin: 0 0 6px; font: 700 11px var(--font-mono); color: var(--platino); letter-spacing: .04em; }
.legal ul { margin: 0; padding-left: 18px; }
.legal li { margin: 0 0 4px; }
.boton {
  display: block; width: 100%; margin: 18px 0 6px; padding: 14px; border: 0; cursor: pointer;
  background: var(--violeta); color: var(--platino); font: 18px var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking);
  clip-path: var(--chaflan);
}
.boton.reserva { font-size: 17px; }
.boton:hover { background: var(--gusano); color: var(--negro); }
.boton[disabled] { background: var(--teja); color: var(--platino); cursor: not-allowed; }
.nota-proto { font-size: 11px; margin: 0 0 10px; }
.real-ia { font-size: 13px; color: var(--plata); border-left: 3px solid var(--teja); padding-left: 10px; }

/* ===== Aviso de IA: fino y plegable ===== */
.aviso {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; /* por encima de los diálogos de juego (z 45) */
  background: var(--negro); border-top: 1px solid var(--teja);
  font-size: 12px; line-height: 1.35; color: var(--platino);
  padding-bottom: env(safe-area-inset-bottom);
}
.aviso-btn {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 30px; padding: 4px 16px; cursor: pointer; font-size: 12px;
}
.aviso-btn:focus-visible { outline: 2px solid var(--gusano); outline-offset: -2px; }
.aviso-chip { flex: none; font: 700 12px/1 var(--font-mono); color: #fff; background: var(--teja); padding: 3px 6px; }
.aviso-corto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aviso-flecha { flex: none; font: 11px var(--font-mono); color: var(--plata); transition: transform .2s; }
.aviso.abierto .aviso-flecha { transform: rotate(180deg); }
.aviso-largo { margin: 0; padding: 0 16px 10px 48px; color: var(--plata); }

/* ===== Escritorio ===== */
@media (min-width: 760px) {
  :root { --cab: 64px; }
  .logo img { height: 28px; }
  .nav { gap: 8px; }
  .nav a { font-size: 14px; padding: 8px 10px; }
  .mapa-intro { right: auto; max-width: 460px; padding: 18px 24px 14px 28px; }
  .mapa-intro .kicker { display: block; font-size: 10px; margin: 0 0 6px; color: var(--violeta-texto); opacity: .85; }
  .mapa-intro h1 { font-size: 17px; margin: 0 0 5px; }
  .mapa-intro .mapa-ayuda { font-size: 11px; white-space: normal; }
  .mapa-ayuda .ayuda-larga { display: inline; }
  .mapa-ayuda .ayuda-corta { display: none; }
  .nodo-foto { width: 68px; height: 68px; }
  .nodo-et { font-size: 13px; }
  .vista-pagina { padding: 48px 32px 64px; }
  .vista-pagina h1 { font-size: 58px; }
  .rejilla-drops { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .rejilla-diario { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .capas { grid-template-columns: 1fr 1fr; }
  .ficha { padding: 24px; }
  .ficha-caja { border: 1px solid var(--violeta); }
  .ficha-rejilla { grid-template-columns: 1fr 1fr; gap: 28px; padding: 64px 28px 28px; }
  .galeria { position: sticky; top: 0; align-self: start; }
  .galeria-minis { padding: 10px 0 0; }
  .ficha-texto { padding: 0; }
  .aviso-btn { justify-content: center; }
  .aviso-corto { flex: none; }
  .aviso-largo { text-align: center; padding: 0 16px 10px; }
}

/* ===== Movimiento reducido: sin lluvia, glitches ni pulsos (el mapa se sigue moviendo y ampliando) ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .nodos.glitch .nodo-et, .nodos.glitch .nodo-foto { transform: none !important; text-shadow: none !important; }
}

/* =====================================================================
   MAPA 3D (js/mundo.bundle.js, fuente en src/)
   ===================================================================== */
canvas.mapa3d { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; outline: none; }
body.mapa-3d .mapa-lienzo { cursor: grab; background: var(--negro); }
body.mapa-3d .mapa-lienzo:active { cursor: grabbing; }
.ley-mono { width: 14px; height: 2px; background: #D040FF; margin-left: 6px; box-shadow: 0 0 4px #D040FF; }
body.mapa-3d .ley-rio { height: 3px; background: linear-gradient(90deg, #12002e, var(--violeta)); }
body.mapa-3d .ley-tel { border-top-color: var(--platino); }
body.mapa-3d .ley-nodo { border-color: var(--violeta); box-shadow: inset 0 0 0 1px var(--gusano); }
/* la interfaz entra cuando termina la caída */
body.mapa-3d .nodos { transition: opacity .6s .1s; }
body.mapa-3d:not(.mundo-listo) .mapa-intro, body.mapa-3d:not(.mundo-listo) .nodos { opacity: 0; pointer-events: none; }

.atribucion { position: absolute; z-index: 3; right: 8px; bottom: 4px; margin: 0; font-size: 8.5px; line-height: 1.2; color: rgba(169, 175, 186, .75); pointer-events: auto; text-align: right; max-width: 70%; }

/* nodos anclados al mundo */
.nodo.nodo3d { left: 0; top: 0; transform-origin: 0 0; will-change: transform; gap: 0; display: block; width: 0; height: 0; }
.nodo3d .nodo-foto { position: absolute; left: 0; bottom: 0; width: 58px; height: 58px; translate: -50% 0; box-shadow: 0 0 22px rgba(122, 27, 255, .55); }
.nodo3d .nodo-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(122, 27, 255, .35)); z-index: 1; pointer-events: none; }
.nodo3d .nodo-et { position: absolute; top: auto; bottom: 18px; left: 34px; margin: 0; transform: none; font-size: 12px; border-left-color: var(--violeta); box-shadow: 0 0 12px rgba(122, 27, 255, .45); }
.nodo3d .nodo-et .num { color: var(--gusano); }
.nodo3d.et-izq .nodo-et { left: auto; right: 34px; }
.nodo3d:hover .nodo-foto, .nodo3d:focus-visible .nodo-foto { background: var(--gusano); }
.nodo3d .nodo-fuera { display: none; }
.nodo3d.fuera .nodo-foto, .nodo3d.fuera .nodo-et { display: none; }
.nodo3d.fuera { width: auto; height: auto; }
.nodo3d.fuera .nodo-fuera {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 10px; padding: 4px 7px 4px 5px;
  background: rgba(7, 6, 10, .88); border: 1px solid var(--violeta); color: var(--platino);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.nodo3d.fuera .nodo-fuera b { color: var(--gusano); font-weight: 700; }
.nodo3d.fuera .nodo-fuera .km { color: var(--plata); }
.nodo3d .flecha { font-style: normal; display: inline-block; color: var(--violeta-texto); font-size: 9px; }
.nodo3d.fuera:hover .nodo-fuera { border-color: var(--gusano); }
.nodo3d.nodo-hq .nodo-foto { width: 30px; height: 30px; background: var(--platino); color: var(--negro); font: 15px/30px var(--font-display); text-align: center; box-shadow: 0 0 18px rgba(236, 234, 242, .5), 0 0 0 1px var(--violeta); }
.nodo3d.nodo-hq .nodo-foto::before { display: none; }
.nodo3d.nodo-hq .nodo-et { left: 20px; bottom: 6px; font-size: 10px; color: var(--platino); border-color: var(--violeta); border-left-color: var(--platino); background: rgba(42, 0, 102, .9); }
.nodo3d.nodo-hq.et-izq .nodo-et { left: auto; right: 20px; }

/* rótulos de barrios y ríos */
.rotulo3d { position: absolute; left: 0; top: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; white-space: nowrap; will-change: transform, opacity; text-shadow: 0 0 8px #07060A, 0 0 2px #07060A; }
.rotulo3d .r-en { font-family: var(--font-display); text-transform: uppercase; }
.rotulo3d .r-zh { font: 10px/1.2 var(--font-mono); color: var(--violeta-texto); }
.r-distrito .r-en { font-size: 15px; letter-spacing: .28em; color: rgba(236, 234, 242, .82); }
.r-rio .r-en { font: italic 10px/1 var(--font-mono); letter-spacing: .35em; color: #B58CFF; }
.r-rio .r-zh { font-size: 9px; }
.r-menor .r-en { font-size: 10px; letter-spacing: .12em; color: var(--plata); }
.r-menor .r-zh { font-size: 8px; }

/* ===== Pantalla de entrada ===== */
.entrada { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-items: center; overflow: hidden; color: var(--platino); }
body.con-entrada { overflow: hidden; }
.entrada-ruido { position: absolute; inset: -50%; opacity: .5; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(122, 27, 255, .06) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 60%, rgba(42, 0, 102, .55), transparent 60%);
  animation: ruido 7s steps(9) infinite; }
@keyframes ruido { 50% { transform: translateY(2%); } }
.entrada-centro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 16px; text-align: center; max-width: 560px; }
.entrada-coord { font-size: 10px; color: var(--plata); letter-spacing: .14em; margin: 0; }
.entrada-coord .entrada-hex { color: var(--gusano); }
.glitch-logo { position: relative; width: min(74vw, 360px); aspect-ratio: 2934 / 874; }
.glitch-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.glitch-logo img:nth-child(2) { filter: brightness(0) saturate(100%) invert(18%) sepia(98%) saturate(6500%) hue-rotate(266deg); mix-blend-mode: screen; animation: g1 2.6s steps(1) infinite; }
.glitch-logo img:nth-child(3) { filter: brightness(0) invert(1); opacity: 0; animation: g2 3.1s steps(1) infinite; }
@keyframes g1 { 0%, 86% { transform: translate(0); clip-path: inset(0); } 88% { transform: translate(-6px, 1px); clip-path: inset(10% 0 55% 0); } 91% { transform: translate(5px, -1px); clip-path: inset(60% 0 8% 0); } 94% { transform: translate(-3px, 0); clip-path: inset(35% 0 40% 0); } }
@keyframes g2 { 0%, 90% { opacity: 0; } 92% { opacity: .55; transform: translate(4px, 0); clip-path: inset(48% 0 30% 0); } 95% { opacity: 0; } }
.entrada-titulo { margin: 0; font-weight: 400; }
.entrada-titulo .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.entrada-titulo .mono { font-size: 11px; letter-spacing: .3em; color: var(--violeta-texto); }
.entrada-btn {
  margin-top: 18px; padding: 16px 28px; border: 1px solid var(--violeta); background: var(--violeta-hondo); color: var(--platino);
  font: 18px/1 var(--font-display); letter-spacing: .06em; cursor: pointer; text-transform: uppercase;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: 0 0 40px rgba(122, 27, 255, .55); position: relative; min-height: 52px;
}
.entrada-btn:hover, .entrada-btn:focus-visible { background: var(--violeta); text-shadow: -2px 0 var(--gusano), 2px 0 #ff2bd6; }
.entrada-btn:focus-visible { outline: 2px solid var(--gusano); outline-offset: 4px; }
.entrada-btn[disabled] { cursor: progress; opacity: .85; }
.entrada-carga { font-size: 10px; letter-spacing: .2em; color: var(--plata); margin: 0; min-height: 1.2em; }
.entrada.lista .entrada-carga { color: var(--violeta-texto); }
.entrada-ia { font-size: 11.5px; color: var(--plata); max-width: 34em; margin: 10px 0 0; line-height: 1.45; border-top: 1px solid rgba(181, 69, 47, .6); padding-top: 10px; }
.entrada-tiras { position: absolute; inset: 0; pointer-events: none; }
.entrada-tiras i { position: absolute; left: 0; right: 0; height: calc(100% / 14 + 1px); background: #000; display: block; }
/* desgarro: la pantalla negra se rompe en tiras que salen disparadas con separación de color */
.entrada.rompe { background: transparent; animation: rompe-fondo .8s steps(1) forwards; }
.entrada.rompe .entrada-ruido { display: none; }
.entrada.rompe .entrada-centro { animation: rompe-centro .5s steps(5) forwards; }
.entrada.rompe .entrada-tiras i { animation: tira .62s cubic-bezier(.7, 0, .9, .4) var(--d) forwards; box-shadow: -4px 0 0 #7A1BFF, 4px 0 0 #A3F51F; }
@keyframes tira { 0% { transform: translateX(0); } 25% { transform: translateX(calc(var(--dx) * .15)); } 100% { transform: translateX(calc(var(--dx) * 4)); opacity: 0; } }
@keyframes rompe-centro {
  0% { transform: translate(0); clip-path: inset(0); filter: none; }
  20% { transform: translate(-14px, 2px); clip-path: inset(0 0 40% 0); filter: drop-shadow(6px 0 #7A1BFF) drop-shadow(-6px 0 #A3F51F); }
  40% { transform: translate(22px, -3px) skewX(-12deg); clip-path: inset(30% 0 20% 0); }
  60% { transform: translate(-30px, 0) scaleY(.4); clip-path: inset(45% 0 45% 0); }
  80% { transform: scaleX(1.8) scaleY(.05); opacity: .8; }
  100% { transform: scaleX(2.4) scaleY(0); opacity: 0; }
}
@keyframes rompe-fondo { 0% { background: rgba(122, 27, 255, .25); } 10% { background: transparent; } }
.entrada.funde { transition: opacity .45s; opacity: 0; }

/* ===== Cursor de escritorio ===== */
.kc, .kc-estela { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 120; display: none; }
.kc-estela { width: 100vw; height: 100vh; z-index: 119; }
html.kc-on .kc, html.kc-on .kc-estela { display: block; }
html.kc-on .vista-mapa, html.kc-on .vista-mapa *, html.kc-on .entrada, html.kc-on .entrada * { cursor: none !important; }
.kc { width: 0; height: 0; }
.kc-mira { position: absolute; left: -22px; top: -22px; overflow: visible; }
.kc-mira path { stroke: var(--platino); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.kc-mira .kc-esq { stroke: var(--violeta); stroke-width: 1.5; transition: transform .12s; transform-origin: 22px 22px; }
.kc-mira rect { fill: var(--gusano); }
.kc-num { position: absolute; left: -26px; top: -24px; margin: 0; font: 9px/11px var(--font-mono); color: rgba(122, 27, 255, .55); letter-spacing: .1em; z-index: -1; }
.kc-coord { position: absolute; left: 18px; top: 14px; white-space: pre; font-size: 10px; line-height: 1.3; color: var(--platino); text-shadow: 0 0 6px #07060A, 0 0 2px #07060A; }
.kc-coord::first-line { color: var(--gusano); }
.kc.kc-lock .kc-esq { stroke: var(--gusano); transform: scale(.72); }
.kc.kc-lock .kc-mira path:first-child { stroke: var(--gusano); }

@media (min-width: 760px) {
  .nodo3d .nodo-foto { width: 68px; height: 68px; }
  .nodo3d .nodo-et { font-size: 13px; left: 40px; }
  .nodo3d.et-izq .nodo-et { right: 40px; }
  .r-distrito .r-en { font-size: 19px; }
  .atribucion { font-size: 9.5px; right: 12px; }
  .entrada-btn { font-size: 21px; padding: 18px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .entrada-ruido, .glitch-logo img { animation: none !important; }
  .kc-estela { display: none !important; }
}
.nodo3d::after { content: ""; position: absolute; left: -.5px; top: 0; width: 1px; height: var(--guia, 0px); background: linear-gradient(var(--violeta), rgba(122, 27, 255, .2)); pointer-events: none; }
@media (max-width: 759px) {
  body.mapa-3d .atribucion { left: 8px; right: 70px; max-width: none; text-align: left; bottom: 4px; }
}
@media (max-width: 420px) { .entrada-titulo .mono { letter-spacing: .16em; font-size: 10px; } }


/* solo para lectores de pantalla */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =====================================================================
   CONTENIDO DEL CAJÓN (ui4: index.html #cajon, js/panel.js, js/app.js): Drops, Diary, Who is Kira.
   La estructura del cajón, los controles del mapa, las pistas y el título de misión están en css/ui4.css.
   (El panel derecho de ui3, franja + hoja, se retiró el 7 oct 2026.)
   ===================================================================== */
:root { --kw-fondo: rgba(9, 7, 16, .96); --kw-borde: rgba(122, 27, 255, .32);
  --kw-chaflan: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
body.mapa-3d:not(.mundo-listo) .mh { opacity: 0; pointer-events: none; }
/* icono de recentrar dibujado con máscara (main.js le pone el texto RESET VIEW, que tapa font-size: 0) */
.btn-centrar { font-size: 0; }
.btn-centrar::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.btn-centrar { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Ccircle cx='8' cy='8' r='4.2'/%3E%3Cpath d='M8 1v3M8 12v3M1 8h3M12 8h3'/%3E%3C/g%3E%3Ccircle cx='8' cy='8' r='1.3'/%3E%3C/svg%3E"); }
.kw-pan:focus { outline: none; }
/* --- Drops: rejilla visual --- */
.kw-drops, .kw-diario { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
.kw-drop-btn { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 5px; width: 100%; cursor: pointer; }
.kw-drop-btn:focus-visible { outline: 2px solid var(--gusano); outline-offset: 3px; }
.kw-foto, .velo-caja { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--panel); border: 1px solid var(--linea); clip-path: var(--kw-chaflan); }
.kw-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(.86) saturate(.9); transition: transform .45s, filter .45s; }
.kw-drop-btn:hover .kw-foto, .kw-drop-btn:focus-visible .kw-foto { border-color: var(--violeta); }
.kw-drop-btn:hover .kw-foto img, .kw-drop-btn:focus-visible .kw-foto img { transform: scale(1.04); filter: none; }
.kw-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: var(--violeta-texto); background: repeating-linear-gradient(45deg, rgba(42, 0, 102, .55) 0 5px, transparent 5px 12px); }
.kw-chip { position: absolute; left: 5px; bottom: 5px; font: 700 9px/1 var(--font-mono); letter-spacing: .06em; padding: 4px 5px 3px; }
.ch-stock { background: var(--gusano); color: var(--negro); }
.ch-preventa { background: var(--violeta); color: var(--platino); }
.ch-agotado { background: var(--teja); color: var(--platino); }
.ch-pronto { background: rgba(7, 6, 10, .85); color: var(--plata); border: 1px solid var(--linea); }
.ch-early { background: var(--gusano); color: var(--negro); }
.kw-drop.agotado .kw-foto img { filter: grayscale(1) brightness(.55); }
.kw-et { font-size: 12px; letter-spacing: .06em; color: var(--violeta-texto); }
.kw-tit { font-size: 12px; line-height: 1.15; color: var(--platino); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Velo: lo no encontrado queda en la niebla --- */
.velado .velo-caja { border: 1px dashed rgba(122, 27, 255, .35); background: #08070d; }
.velo-niebla {
  position: absolute; inset: -20%; display: block;
  background:
    radial-gradient(ellipse 60% 40% at 30% 40%, rgba(122, 27, 255, .2), transparent 70%),
    radial-gradient(ellipse 50% 35% at 70% 70%, rgba(169, 175, 186, .1), transparent 70%),
    repeating-linear-gradient(0deg, rgba(122, 27, 255, .05) 0 1px, transparent 1px 3px);
  animation: velo-deriva 14s ease-in-out infinite alternate;
}
@keyframes velo-deriva { to { transform: translate(6%, -4%) scale(1.08); } }
.velo-q { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; letter-spacing: .14em; color: rgba(236, 234, 242, .3); filter: blur(.5px); }
.velo-pie { position: absolute; left: 6px; bottom: 6px; font-size: 9px; letter-spacing: .1em; color: var(--plata); }
.velo-pie b { display: inline-grid; place-items: center; width: 13px; height: 13px; margin-right: 3px; color: var(--platino); background: var(--violeta); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); font-size: 8px; }
.rejilla-drops .velado .velo-caja { aspect-ratio: 3 / 4; }

/* --- Diary: miniatura vertical y título --- */
.kw-ep-caja { display: flex; flex-direction: column; gap: 5px; }
.kw-vid { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: var(--panel); border: 1px solid var(--linea); clip-path: var(--kw-chaflan); }
.kw-vid img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.8); transition: filter .4s; }
.kw-drop-btn:hover .kw-vid img, .kw-drop-btn:focus-visible .kw-vid img { filter: brightness(.75); }
.kw-play { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(236, 234, 242, .6); clip-path: var(--kw-chaflan); background: rgba(7, 6, 10, .45); }
.kw-play::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid var(--platino); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.kw-vid.velado .kw-play { opacity: .35; }
.kw-ia-vid { position: absolute; left: 5px; top: 5px; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--platino); background: rgba(181, 69, 47, .9); padding: 3px 4px 2px; }
.kw-ep .kw-et { color: var(--plata); }

/* --- Who is Kira: tarjeta breve --- */
.kw-retrato {
  position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; clip-path: var(--kw-chaflan);
  background: radial-gradient(ellipse at 50% 120%, rgba(122, 27, 255, .55), transparent 65%), repeating-linear-gradient(0deg, rgba(122, 27, 255, .07) 0 1px, transparent 1px 3px), #07060A;
  border: 1px solid var(--kw-borde);
}
.kw-retrato img { width: 52%; height: auto; filter: drop-shadow(3px 0 0 var(--violeta-sombra)); }
.kw-retrato span { position: absolute; left: 8px; bottom: 6px; font-size: 9px; letter-spacing: .2em; color: var(--plata); }
.kw-ia { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; font-size: 12px; letter-spacing: .1em; color: var(--platino); }
.kw-bio { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--plata); }
.kw-datos { list-style: none; margin: 0; padding: 0; font-size: 11px; color: var(--plata); }
.kw-datos li { display: flex; gap: 8px; padding: 6px 0; border-top: 1px solid var(--linea); }
.kw-datos b { min-width: 64px; color: var(--violeta-texto); font-weight: 400; letter-spacing: .1em; }
.kw-todo { display: flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 11px; letter-spacing: .12em; color: var(--violeta-texto); text-decoration: none; }
.kw-todo:hover { color: var(--platino); }

.mapa-leyenda p, .cj-pan .mapa-leyenda { margin: 0; }
.ley-rio { width: 14px; height: 3px; background: linear-gradient(90deg, #12002e, var(--violeta)); }
.ley-tel { width: 14px; border-top: 2px dashed var(--platino); }
.ley-nodo { width: 9px; height: 9px; border: 2px solid var(--violeta); box-shadow: inset 0 0 0 1px var(--gusano); }
.vista-mapa .mapa-zoom { margin: 0; }

/* hora y tiempo de Chongqing: una línea casi invisible */
.mh { position: absolute; z-index: 4; left: 16px; bottom: 40px; pointer-events: none; }
.mh .vivo-hud { margin: 0; padding: 0; background: none; font-size: 9px; letter-spacing: .16em; color: rgba(169, 175, 186, .55); text-shadow: 0 0 4px var(--negro); white-space: nowrap; }
body.mapa-3d .vista-mapa .atribucion { left: 16px; right: auto; bottom: 8px; max-width: 46%; text-align: left; opacity: .6; }
@media (max-width: 759px) {
  .kw-drops, .kw-diario { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .mh { left: 8px; bottom: 34px; }
  body.mapa-3d .vista-mapa .atribucion { left: 8px; right: 8px; max-width: none; bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .velo-niebla { animation: none; }
  .kw-foto img { transition: none; }
}