/* =====================================================================
   KIRA · identidad v1 (13 oct 2026) · web/guia-estetica-v1.md (BLOQUEADA, P-094)
   Capa de componentes: se carga la última (index.html la mueve detrás de css/mundo3d.css).
   - Violeta = la ciudad (base). Verde #B6FF1A = Kira (solo hallazgos, CTA y puntas). Hueso = el sistema.
   - Fría y precisa, con algo de liturgia: bordes finos, esquinas con remate de espina, luz de vidriera
     detrás del cristal en tres sitios (entrada, cabecera del menú, diario de Kira en la ficha).
   - Seco en reposo; el brillo verde solo como recompensa (hover/foco de un hallazgo o CTA).
   - Nubes 祥云 de línea fina como ornamento (img/xiangyun*.svg, usadas como máscara: color por CSS).
   - Fuera: logo KIRA pixelado, Kira Glitch, glitch RGB, chaflanes y scanlines de videojuego.
   ===================================================================== */
:root {
  --kw-fondo: rgba(10, 7, 20, .96);
  --kw-borde: rgba(116, 64, 255, .38);
  --kw-chaflan: none;
  --linea-v: rgba(116, 64, 255, .42);         /* filo violeta de la ciudad */
  --cristal: rgba(11, 8, 22, .78);             /* panel sobre el mapa */
  --verde-suave: rgba(182, 255, 26, .14);
  --brillo-verde: 0 0 0 1px rgba(182, 255, 26, .55), 0 0 22px rgba(182, 255, 26, .28);
  --espina: url("../img/marco-espina.svg") 10 / 10px / 0 stretch;
  --espina-verde: url("../img/marco-espina-verde.svg") 10 / 10px / 0 stretch;
  --espina-hueso: url("../img/marco-espina-hueso.svg") 10 / 10px / 0 stretch;
  --nube: url("../img/xiangyun.svg");
  --nube-esq: url("../img/xiangyun-esquina.svg");
  --nube-v: url("../img/xiangyun-violeta.svg");          /* la misma nube ya en violeta, para fondos */
  --t-suave: .28s cubic-bezier(.2, .7, .2, 1);
  /* luz de vidriera: color detrás del cristal (violeta, añil, vino y un hilo ámbar); el plomo va encima */
  --vidriera-luz:
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(168, 120, 255, .55), transparent 70%),
    radial-gradient(ellipse 40% 50% at 22% 62%, rgba(52, 66, 220, .42), transparent 70%),
    radial-gradient(ellipse 40% 50% at 80% 64%, rgba(126, 34, 96, .40), transparent 70%),
    radial-gradient(ellipse 22% 16% at 50% 14%, rgba(255, 196, 120, .28), transparent 70%),
    linear-gradient(180deg, #1B0F3D, #0B0718 75%);
  /* barra de estado y terminal: frías */
  --term-acento: #A88BFF; --es-txt: #B3ABC2; --es-fondo: rgba(116, 64, 255, .06); --es-modo: rgba(116, 64, 255, .26); --es-borde: rgba(116, 64, 255, .3);
}

/* ---------- base ---------- */
body { font: 400 16px/1.55 var(--font-texto); letter-spacing: .005em; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(116, 64, 255, .55); color: var(--hueso); }
[lang^="zh"], .zh, .r-zh { font-family: var(--font-zh); }
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking); line-height: 1.05; }
.display.reserva, .reserva { font-family: inherit; font-stretch: normal; font-weight: inherit; letter-spacing: inherit; }
.glitch-sombra { text-shadow: none; }
.mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: .02em; }
.kicker { font: 400 12px/1.2 var(--font-mono); letter-spacing: .26em; color: var(--violeta-texto); }
:focus-visible { outline: 2px solid var(--hueso); outline-offset: 3px; }
a { color: var(--violeta-texto); text-underline-offset: 3px; }

/* marco de espina reutilizable (border-image: el borde es fino, las esquinas sup-izq e inf-der llevan una espina) */
.k-espina { border: 1px solid transparent; border-image: var(--espina); }

/* ---------- cabecera y logo ---------- */
.cabecera { background: var(--negro); border-bottom: 1px solid var(--linea-v); }
.logo { flex-direction: row; align-items: center; gap: 10px; color: var(--hueso); }
.logo .logo-img, .logo img { height: 48px; width: auto; filter: none; }
.logo-txt { display: flex; flex-direction: column; gap: 3px; }
.logo-zh { font: 500 15px/1 var(--font-zh); letter-spacing: .18em; color: var(--hueso); }
.logo-sub { font: 400 12px/1 var(--font-mono); letter-spacing: .14em; color: var(--plata); }
.logo-sub [lang] { font-family: var(--font-zh); letter-spacing: .1em; }
body[data-vista="mapa"] .logo { filter: drop-shadow(0 0 8px rgba(7, 5, 13, .95)); }
body[data-vista="mapa"] .logo-zh, body[data-vista="mapa"] .logo-sub { text-shadow: 0 0 6px var(--negro), 0 0 2px var(--negro); }
.logo:hover .logo-img { filter: drop-shadow(0 0 6px rgba(116, 64, 255, .6)); }
.logo:focus-visible { outline: 2px solid var(--hueso); outline-offset: 4px; }

/* botón MENU */
.menu-btn {
  clip-path: none; border: 1px solid transparent; border-image: var(--espina);
  background: var(--cristal); color: var(--hueso);
  font: 600 12px/1 var(--font-display); letter-spacing: .24em; transition: background var(--t-suave), color var(--t-suave);
}
.menu-btn svg { color: var(--violeta-texto); }
.menu-btn svg path:last-child { fill: currentColor; }
.menu-btn:hover { background: rgba(36, 16, 79, .85); }
.menu-btn:hover svg path:last-child { fill: currentColor; }
.menu-btn:focus-visible { box-shadow: none; outline: 2px solid var(--hueso); outline-offset: 2px; }
.menu-btn[aria-expanded="true"] { background: var(--violeta-hondo); border-image: var(--espina-hueso); }

/* ---------- botones (sans ancha, filo fino, espina en la esquina) ---------- */
.boton, .jg-btn, .entrada-btn {
  clip-path: none; border: 1px solid transparent; border-image: var(--espina);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  transition: background var(--t-suave), color var(--t-suave), box-shadow var(--t-suave);
}
/* CTA (comprar, entrar): verde de Kira en el filo y el texto; se ilumina solo al tocarlo */
.boton { background: rgba(182, 255, 26, .06); color: var(--gusano); border-image: var(--espina-verde); font-size: 15px; padding: 15px 14px; }
.boton.reserva { font-size: 15px; }
.boton:hover, .boton:focus-visible { background: var(--gusano); color: var(--negro); box-shadow: 0 0 26px rgba(182, 255, 26, .32); outline: none; }
.boton:focus-visible { outline: 2px solid var(--hueso); outline-offset: 3px; }
.boton[disabled] { background: rgba(236, 229, 214, .04); color: var(--plata); border-image: var(--espina-hueso); box-shadow: none; cursor: not-allowed; }
.jg-btn { background: var(--violeta-hondo); color: var(--hueso); font-size: 13px; }
.jg-btn:hover, .jg-btn:focus-visible { background: var(--gusano); color: var(--negro); border-color: transparent; border-image: var(--espina-verde); }
.jg-btn.jg-grande { font-size: 15px; }
.jg-btn.jg-mini { font-size: 11px; }
.cerrar {
  clip-path: none; border: 1px solid transparent; border-image: var(--espina); background: var(--cristal);
  color: var(--hueso); font: 300 26px/1 var(--font-mono);
}
.cerrar:hover { background: var(--violeta-hondo); }

/* ---------- pantalla de entrada (src/entrada.js: mismo marcado, nueva piel) ---------- */
.entrada { background: #050309; }
.entrada-ruido {
  inset: 0; opacity: 1; animation: none;
  background:
    radial-gradient(ellipse 34% 52% at 50% 44%, rgba(116, 64, 255, .16), transparent 72%),
    radial-gradient(ellipse 120% 70% at 50% 120%, rgba(36, 16, 79, .55), transparent 60%);
}
/* lanceta de vidriera detrás del logo: luz de color tras el cristal, muy tenue */
.entrada-ruido::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(64vw, 300px); aspect-ratio: 200 / 420; translate: -50% -56%;
  background: url("../img/vidriera.svg") center / 100% 100% no-repeat, var(--vidriera-luz);
  -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 45%, #000 30%, transparent 78%); mask: radial-gradient(ellipse 50% 50% at 50% 45%, #000 30%, transparent 78%);
  opacity: .34; filter: blur(.4px) saturate(.9);
}
/* nubes 祥云 en las cuatro esquinas */
.entrada::before, .entrada::after, .entrada-tiras::before, .entrada-tiras::after {
  content: ""; position: absolute; width: 44px; height: 44px; background: rgba(168, 139, 255, .5);
  -webkit-mask: var(--nube-esq) center / contain no-repeat; mask: var(--nube-esq) center / contain no-repeat; pointer-events: none;
}
.entrada::before { left: 16px; top: 16px; }
.entrada::after { right: 16px; top: 16px; transform: scaleX(-1); }
.entrada-tiras::before { left: 16px; bottom: 16px; transform: scaleY(-1); }
.entrada-tiras::after { right: 16px; bottom: 16px; transform: scale(-1, -1); }
.entrada-centro { gap: 12px; max-width: 520px; }
.entrada-coord { font: 300 12px/1.3 var(--font-mono); letter-spacing: .16em; color: var(--plata); }
.entrada-coord .zh { font-family: var(--font-zh); }
.entrada-coord .entrada-hex { color: var(--violeta-texto); }
/* logo: tubo de neón violeta con puntas verdes; sin glitch */
.glitch-logo { width: min(70vw, 340px); aspect-ratio: 1014 / 590; margin-bottom: 30px; }
.glitch-logo img:nth-child(2), .glitch-logo img:nth-child(3) { display: none; }
.glitch-logo img:first-child { animation: kv1-respira 7s ease-in-out infinite; }
.glitch-logo::after { /* 琪拉 pequeño debajo, entre dos nubes */
  content: "琪拉"; position: absolute; left: 50%; top: 100%; translate: -50% 4px; padding: 0 40px;
  font: 500 15px/1 var(--font-zh); letter-spacing: .5em; text-indent: .5em; color: var(--hueso); white-space: nowrap;
  background: var(--nube-v) left center / 30px 7px no-repeat, var(--nube-v) right center / 30px 7px no-repeat;
}
@keyframes kv1-respira { 0%, 100% { filter: brightness(.94); } 50% { filter: brightness(1.06); } }
.entrada-titulo .mono { font: 300 12px/1.4 var(--font-mono); letter-spacing: .3em; color: var(--violeta-texto); }
.entrada-btn {
  margin-top: 14px; min-height: 52px; padding: 17px 34px; background: rgba(182, 255, 26, .04); color: var(--gusano);
  border-image: var(--espina-verde); font-size: 15px; box-shadow: none;
}
.entrada-btn:hover { background: var(--gusano); color: var(--negro); text-shadow: none; box-shadow: 0 0 34px rgba(182, 255, 26, .35); }
/* el botón recibe el foco al cargar: en reposo sigue seco (solo el filo hueso del foco); se ilumina al tocarlo */
.entrada-btn:focus-visible { background: rgba(182, 255, 26, .04); color: var(--gusano); text-shadow: none; box-shadow: none; outline: 1px solid rgba(236, 229, 214, .7); outline-offset: 5px; }
.entrada-btn:focus-visible:hover { background: var(--gusano); color: var(--negro); }
.entrada-carga { font: 300 12px/1.3 var(--font-mono); letter-spacing: .2em; color: var(--plata); }
.entrada.lista .entrada-carga { color: var(--hueso); }
.entrada-ia {
  font: 400 13px/1.5 var(--font-texto); color: var(--hueso); max-width: 30em; margin-top: 12px; padding-top: 14px;
  border-top: 0; background: var(--nube-v) center top / 60px 13px no-repeat;
}
@media (min-width: 760px) { .entrada-btn { font-size: 16px; padding: 18px 42px; } }

/* ---------- cajón del menú ---------- */
.cajon { background: linear-gradient(180deg, rgba(12, 8, 24, .97), rgba(7, 5, 13, .985) 45%); border-right: 1px solid var(--linea-v); }
.cajon::after { display: none; }
/* cabecera del cajón: vidriera (lo católico solo por la luz) */
.cj-cab { position: relative; overflow: hidden; min-height: 72px; border-bottom: 1px solid var(--linea-v); background: #0B0718; }
.cj-cab::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/vidriera.svg") 78% 0 / 120px auto repeat-x, var(--vidriera-luz);
  opacity: .32; -webkit-mask: linear-gradient(90deg, transparent 20%, #000 75%); mask: linear-gradient(90deg, transparent 20%, #000 75%);
}
.cj-cab > * { position: relative; }
.cj-tit { font: 400 12px/1 var(--font-mono); letter-spacing: .34em; color: var(--hueso); }
.cj-x { clip-path: none; color: var(--hueso); }
.cj-x:hover { background: rgba(36, 16, 79, .7); }
.cj-x:focus-visible { box-shadow: none; outline: 2px solid var(--hueso); outline-offset: -4px; }
.cj-volver { font: 400 12px/1 var(--font-mono); letter-spacing: .2em; color: var(--hueso); }
.cj-volver:hover { color: var(--violeta-texto); }
.cj-sec { border-bottom: 1px solid rgba(236, 229, 214, .08); }
.cj-sec-b { color: var(--plata); transition: background var(--t-suave); }
.cj-ico { color: var(--violeta-texto); }
.cj-nom { font: 700 16px/1.1 var(--font-display); letter-spacing: .12em; color: var(--hueso); text-transform: uppercase; transition: color var(--t-suave); }
.cj-meta { font: 400 12px/1 var(--font-mono); color: var(--gusano); }
.cj-sec-b:hover { background: rgba(36, 16, 79, .35); }
.cj-sec-b:hover .cj-nom { text-shadow: none; color: #fff; }
.cj-sec-b:focus-visible { box-shadow: inset 2px 0 0 var(--hueso); background: rgba(36, 16, 79, .45); }
.cj-sec.abierta > .cj-h .cj-sec-b { box-shadow: inset 2px 0 0 var(--violeta); }
.cj-sec.abierta > .cj-h .cj-sec-b:focus-visible { box-shadow: inset 2px 0 0 var(--hueso); }
.cj-pie { position: relative; border-top: 1px solid var(--linea-v); padding-top: 16px; }
.cj-pie::before { /* nube 祥云 sobre el filo */
  content: ""; position: absolute; left: 50%; top: -5px; width: 56px; height: 12px; margin-left: -28px; background: var(--violeta-texto);
  -webkit-mask: var(--nube) center / contain no-repeat; mask: var(--nube) center / contain no-repeat; box-shadow: 0 0 0 4px #0A0715;
}
.cj-pie p { color: var(--hueso); font-size: 13px; }
.cj-pasos b, .cjf-codigos, .kw-datos b { color: var(--violeta-texto); }
.cj-pasos strong { font-weight: 600; color: var(--hueso); }
.cj-ex { background: var(--violeta-hondo); border: 1px solid var(--violeta-texto); }
.cj-dron-b { clip-path: none; border: 1px solid transparent; border-image: var(--espina); font: 600 12px/1.2 var(--font-display); letter-spacing: .18em; }
.cj-dron-b:hover { background: rgba(36, 16, 79, .55); }
.cj-dron-b.activo { border-image: var(--espina-verde); }
.cjf-n { font-family: var(--font-display); font-weight: 700; }

/* tarjetas de drops y diario */
.kw-foto, .velo-caja, .kw-vid, .kw-retrato, .kw-play { clip-path: none; }
.kw-foto, .kw-vid { border: 1px solid transparent; border-image: var(--espina); }
.kw-drop-btn:hover .kw-foto, .kw-drop-btn:focus-visible .kw-foto { border-image: var(--espina-verde); box-shadow: 0 0 18px rgba(182, 255, 26, .16); }
.kw-et { font: 400 12px/1.2 var(--font-mono); letter-spacing: .1em; color: var(--violeta-texto); }
.kw-tit { font: 600 12px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.kw-chip { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; }
.velado .velo-caja { border: 1px dashed rgba(116, 64, 255, .4); background: #08060F; }
.velo-niebla { background: radial-gradient(ellipse 60% 40% at 30% 40%, rgba(116, 64, 255, .18), transparent 70%), radial-gradient(ellipse 50% 35% at 70% 70%, rgba(236, 229, 214, .07), transparent 70%); }
.velo-q { font-family: var(--font-display); font-weight: 700; color: rgba(236, 229, 214, .28); filter: none; }
.velo-pie b { background: var(--violeta-hondo); border: 1px solid var(--violeta-texto); }
.kw-play { border: 1px solid rgba(236, 229, 214, .5); }
.kw-ia-vid { background: var(--hueso); color: var(--negro); font: 500 11px/1 var(--font-mono); }
.kw-retrato {
  border: 1px solid transparent; border-image: var(--espina);
  background: url("../img/vidriera.svg") center 10% / 46% auto no-repeat, radial-gradient(ellipse at 50% 30%, rgba(116, 64, 255, .35), transparent 65%), #08060F;
}
.kw-retrato img { width: 58%; filter: none; }
.kw-retrato .kw-zh { position: absolute; right: 10px; bottom: 6px; font: 500 13px/1 var(--font-zh); letter-spacing: .3em; color: var(--hueso); }
.kw-todo { font: 400 12px/1 var(--font-mono); letter-spacing: .16em; color: var(--hueso); }
.kw-todo:hover { color: var(--gusano); }

/* ---------- aviso de IA: siempre visible y legible ---------- */
.aviso { background: var(--negro); border-top: 1px solid rgba(236, 229, 214, .22); color: var(--hueso); }
.aviso-btn { font: 400 13px/1.3 var(--font-texto); }
.aviso-chip { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--negro); background: var(--hueso); padding: 4px 6px 3px; }
.aviso-corto { color: var(--hueso); }
.aviso-flecha { color: var(--plata); }
.aviso-btn:focus-visible { outline: 2px solid var(--hueso); outline-offset: -3px; }
.aviso-largo { color: var(--hueso); opacity: .85; font-size: 13px; }

/* ---------- barra de estado (modo editor) ---------- */
.estado { font: 400 12px/1 var(--font-mono); letter-spacing: .1em; background: linear-gradient(var(--es-fondo), var(--es-fondo)), var(--negro); border-top: 1px solid var(--es-borde); }
.es-modo { font-weight: 500; letter-spacing: .18em; color: var(--hueso); }
.es-vista { color: var(--hueso); }
.estado[data-modo="COMMAND"] .es-modo { background: var(--violeta); }
.estado[data-modo="INSERT"] .es-modo { background: var(--verde-suave); color: var(--gusano); }
.es-term:focus-visible { outline-color: var(--hueso); }

/* ---------- terminal ---------- */
.term { font-family: var(--font-mono); background: rgba(7, 5, 13, .97); border-top: 1px solid var(--linea-v); }
.term-salida { font: 300 13px/1.65 var(--font-mono); }
.term-prompt { font: 500 15px/1 var(--font-mono); }
.term-campo { font: 400 15px/1 var(--font-mono); }
.tl b { font-weight: 500; color: var(--hueso); }
.tl-tit { letter-spacing: .24em; color: var(--violeta-texto); }
.tl-ok { color: var(--gusano); }
.tl-pieza:hover, .tl-pieza:focus-visible { background: rgba(116, 64, 255, .18); }
.tl-pieza:focus-visible, .tl-cmd:focus-visible { outline-color: var(--hueso); }
@media (max-width: 759px) { .term-campo, .term-prompt { font-size: 16px; } }

/* ---------- controles del mapa ---------- */
.mctl-b { clip-path: none; border: 1px solid transparent; border-image: var(--espina); background: var(--cristal); color: var(--hueso); }
.mctl .btn-zoom-mas, .mctl .btn-zoom-menos { clip-path: none; }
.mctl .btn-zoom-menos { margin-top: -9px; }
.mctl-b:hover { background: rgba(36, 16, 79, .85); }
.mctl-b:focus-visible { box-shadow: none; outline: 2px solid var(--hueso); outline-offset: 2px; }
.mctl .vivo-sonido.activo { color: var(--gusano); border-image: var(--espina-verde); }

/* ---------- HUD del mapa ---------- */
.mh .vivo-hud, .vivo-hud { font: 400 12px/1.2 var(--font-mono); letter-spacing: .16em; color: var(--plata); background: none; }
.hz-cuenta::before, .vivo-hud::before { opacity: .7; }
body.mapa-3d .vista-mapa .atribucion { font: 300 11px/1.35 var(--font-mono); color: rgba(179, 171, 194, .85); }
@media (max-width: 759px) { body.mapa-3d .vista-mapa .atribucion { font-size: 10px; } }
.mision-sub { font: 400 12px/1.4 var(--font-mono); letter-spacing: .2em; }
.pistas { clip-path: none; border: 1px solid transparent; border-image: var(--espina); background: var(--cristal); font: 400 12px/1.3 var(--font-mono); }
.pz-luz { background: var(--violeta-hondo); border-color: var(--violeta-texto); }

/* marcadores de drops en el mapa: etiqueta fría, número en verde (hallazgo) */
.nodo-foto, .nodo3d .nodo-foto { clip-path: none; }
.nodo-foto img, .nodo-foto .ph { clip-path: none; }
.nodo3d .nodo-foto { padding: 1px; background: var(--violeta); box-shadow: 0 0 16px rgba(116, 64, 255, .4); }
.nodo3d .nodo-foto::before { background: linear-gradient(transparent 60%, rgba(116, 64, 255, .3)); }
.nodo-et, .nodo3d .nodo-et {
  font: 700 11px/1.15 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(7, 5, 13, .9); border: 1px solid transparent; border-image: var(--espina); box-shadow: none; padding: 5px 8px 4px;
}
.nodo3d .et-l1 { color: var(--hueso); }
.nodo3d .et-l2 { font: 400 11px/1.2 var(--font-mono); letter-spacing: .08em; }
.nodo3d .et-l2 .num, .nodo-et .num { color: var(--gusano); }
.nodo3d .et-l2 .pre { font: 500 10px/1 var(--font-mono); color: var(--negro); background: var(--gusano); }
.nodo3d.revelado:hover .nodo-foto, .nodo3d.revelado:focus-visible .nodo-foto { background: var(--gusano); box-shadow: 0 0 24px rgba(182, 255, 26, .4); }
.nodo3d.revelado:hover .nodo-et, .nodo3d.revelado:focus-visible .nodo-et { border-image: var(--espina-verde); }
.nodo3d:hover .nodo-foto, .nodo3d:focus-visible .nodo-foto { background: var(--gusano); }
.nodo3d.descifrando .nodo-et { border-image: var(--espina-verde); }
.nodo3d.fuera .nodo-fuera {
  clip-path: none; border: 1px solid transparent; border-image: var(--espina); background: rgba(7, 5, 13, .88);
  font: 400 12px/1.2 var(--font-mono); letter-spacing: .06em; box-shadow: none;
}
.nodo3d.fuera:not(.revelado) .nodo-fuera { box-shadow: none; }
.nodo3d.fuera:hover .nodo-fuera { border-image: var(--espina-verde); }
.nodo3d .f-oculto b, .nodo3d.fuera .nodo-fuera b { color: var(--gusano); }
.nodo3d.nodo-hq .nodo-foto { font: 700 14px/30px var(--font-display); background: var(--hueso); box-shadow: 0 0 0 1px var(--violeta); }
.nodo3d.nodo-hq .nodo-et { background: rgba(22, 10, 51, .92); border-image: var(--espina-hueso); }
.nodos.glitch .nodo-et { transform: none; text-shadow: none; }
.nodos.glitch .nodo:nth-child(2n) .nodo-foto { transform: none; }
.senal-cod { font: 400 10px/13px var(--font-mono); color: rgba(168, 139, 255, .8); }
.rotulo3d .r-en { font-family: var(--font-display); font-weight: 600; }
.r-rio .r-en { font-family: var(--font-mono); font-weight: 300; }
.hallazgos .hz-cuenta { font: 400 11px/1.2 var(--font-mono); }
.hallazgos .hz-cuenta i { background: var(--violeta-hondo); }
.hallazgos .hz-reset, .vivo-botones button { clip-path: none; border: 1px solid transparent; border-image: var(--espina); font-family: var(--font-mono); }

/* ---------- barra del pulgar (móvil) ---------- */
@media (max-width: 759px) {
  .barra-m { background: linear-gradient(180deg, rgba(7, 5, 13, 0), rgba(7, 5, 13, .84) 32%, rgba(7, 5, 13, .97)); padding: 8px 16px 4px; }
  .barra-asa { background: rgba(236, 229, 214, .35); }
  .ultimo { clip-path: none; border: 1px solid transparent; border-image: var(--espina-verde); background: var(--cristal); }
  .ultimo.en-niebla { border-image: var(--espina); }
  .ultimo:active, .ultimo:hover { background: rgba(36, 16, 79, .85); }
  .ultimo:focus-visible { box-shadow: none; outline: 2px solid var(--hueso); outline-offset: 2px; }
  .ultimo-foto { clip-path: none; }
  .ultimo-txt b { font: 700 12px/1 var(--font-display); letter-spacing: .16em; color: var(--gusano); }
  .ultimo.en-niebla .ultimo-txt b { color: var(--hueso); }
  .ultimo-et { font: 400 12px/1.2 var(--font-mono); }
  body[data-vista="mapa"] .cabecera { padding: 12px 16px; }
  .mctl { right: 16px; }
  .term-m { font-family: var(--font-mono); }
}

/* ---------- ficha de producto (panel de drop) ---------- */
.ficha { background: rgba(5, 3, 10, .84); }
.ficha-caja { background: var(--negro); border-color: var(--linea-v); }
@media (min-width: 760px) {
  .ficha-caja { border: 1px solid transparent; border-image: var(--espina); }
  .ficha-caja::before, .ficha-caja::after { /* nubes 祥云 en las esquinas superiores */
    content: ""; position: absolute; top: 12px; width: 34px; height: 34px; background: rgba(168, 139, 255, .45); pointer-events: none;
    -webkit-mask: var(--nube-esq) center / contain no-repeat; mask: var(--nube-esq) center / contain no-repeat;
  }
  .ficha-caja::before { left: 12px; }
  .ficha-caja::after { right: 66px; transform: scaleX(-1); }
}
/* diario de Kira (ficción): luz de vidriera tras el cristal */
.log {
  clip-path: none; border: 1px solid transparent; border-image: var(--espina); overflow: hidden;
  background: linear-gradient(180deg, rgba(9, 6, 19, .72), rgba(9, 6, 19, .9)), url("../img/vidriera.svg") right -30px top -40px / 130px auto no-repeat, var(--vidriera-luz);
}
.log-cab { font: 400 12px/1.4 var(--font-mono); letter-spacing: .14em; color: var(--violeta-texto); text-transform: uppercase; }
.log-cab .display, .log-cab b { font-family: var(--font-mono); }
.log-texto p { font: 400 16px/1.6 var(--font-texto); font-style: normal; color: var(--hueso); }
.log-pie { font: 300 12px/1.3 var(--font-mono); letter-spacing: .06em; }
.real-cab { font: 400 12px/1.2 var(--font-mono); letter-spacing: .2em; color: var(--plata); border-top-color: var(--linea); }
.real-titulo { font: 700 22px/1.1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--hueso); }
.etiqueta { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; padding: 6px 8px 5px; }
.et-stock { color: var(--negro); background: var(--gusano); }
.et-preventa { color: var(--hueso); background: var(--violeta-hondo); border: 1px solid var(--violeta); }
.galeria-principal figcaption { font: 400 12px/1 var(--font-mono); letter-spacing: .1em; background: rgba(7, 5, 13, .85); color: var(--hueso); padding: 5px 7px; }
.galeria-principal figcaption.ia { background: var(--hueso); color: var(--negro); }
.mini { border-color: var(--linea); }
.mini[aria-current="true"] { border: 1px solid var(--hueso); }
.compra { border: 1px solid transparent; border-image: var(--espina); background: rgba(7, 5, 13, .97); }
.compra-importe { font: 700 22px/1.1 var(--font-display); letter-spacing: .04em; }
.compra-total, .compra-inc { font-family: var(--font-mono); }
.compra-talla-et { font: 400 12px/1 var(--font-mono); letter-spacing: .16em; }
.talla-btn { background: var(--violeta-hondo); border-color: var(--violeta); font: 500 14px var(--font-mono); }
.talla-btn[aria-checked="true"] { border-color: var(--gusano); box-shadow: inset 0 0 0 1px var(--gusano); }
.compra-cod-b { font: 400 12px/1.3 var(--font-mono); letter-spacing: .08em; }
.compra-cod-b:hover b, .compra-cod-b:focus-visible b { color: var(--gusano); }
.hueco { color: var(--teja-texto); border-color: rgba(228, 138, 114, .7); font-family: var(--font-mono); }
.datos dt { font: 400 11px/1.3 var(--font-mono); letter-spacing: .12em; }
.datos dd { font: 400 14px/1.4 var(--font-mono); }
.pieza-nombre { font: 700 14px/1.3 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.legal h3 { font: 500 11px var(--font-mono); letter-spacing: .14em; }
.preventa-datos { border: 1px solid transparent; border-image: var(--espina); background: rgba(36, 16, 79, .3); }
.real-ia { border-left-color: var(--hueso); }
.jg-ficha-cod { clip-path: none; border: 1px solid transparent; border-image: var(--espina); background: rgba(36, 16, 79, .22); }
@media (max-width: 759px) {
  .compra { border: 0; border-top: 1px solid var(--linea-v); border-image: none; padding: 8px 16px 4px; background: var(--negro); isolation: isolate; }
  .ficha-texto { padding: 18px 16px 0; }
}

/* ---------- páginas (Drops, Diary, Who is Kira) ---------- */
.vista-pagina h1 { font-size: 34px; letter-spacing: .08em; }
@media (min-width: 760px) { .vista-pagina h1 { font-size: 46px; } }
.vista-pagina h1::after { /* nube bajo el titular */
  content: ""; display: block; width: 72px; height: 15px; margin-top: 12px; background: var(--violeta-texto);
  -webkit-mask: var(--nube) left center / contain no-repeat; mask: var(--nube) left center / contain no-repeat;
}
.h2 { font-size: 18px; letter-spacing: .1em; }
.tarjeta-foto { border: 1px solid transparent; border-image: var(--espina); }
.tarjeta-btn:hover .tarjeta-foto { border-image: var(--espina-verde); }
.tarjeta-meta { font-family: var(--font-mono); letter-spacing: .1em; }
.tarjeta-titulo { font: 700 14px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.aviso-grande { border: 1px solid rgba(236, 229, 214, .4); border-left-width: 3px; background: rgba(236, 229, 214, .04); }
.aviso-grande .mono { color: var(--hueso); letter-spacing: .16em; font-weight: 500; }
.capas div { border: 1px solid transparent; border-image: var(--espina); }
.ph-ia { border-color: var(--linea-v); background: radial-gradient(ellipse at 50% 30%, rgba(116, 64, 255, .2), transparent 70%), var(--panel); }

/* ---------- minijuegos (paneles) ---------- */
.jg-terminal {
  clip-path: none; border: 1px solid transparent; border-image: var(--espina);
  background: linear-gradient(180deg, #0E0A1C, #08060F); box-shadow: 0 0 0 1px rgba(22, 10, 51, .8), 0 24px 60px rgba(0, 0, 0, .6);
}
.jg-barra { background: var(--violeta-hondo); font: 400 12px/1 var(--font-mono); letter-spacing: .2em; border-bottom: 1px solid var(--linea-v); }
.jg-x { font-family: var(--font-mono); font-weight: 300; }
.jg-x:hover, .jg-x:focus-visible { color: var(--hueso); background: rgba(7, 5, 13, .6); }
.jg-titulo { font: 700 24px/1.1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; text-shadow: none; }
.jg-sub { font: 400 12px/1.3 var(--font-mono); letter-spacing: .2em; }
.jg-premio { border: 1px solid transparent; border-image: var(--espina-verde); background: radial-gradient(ellipse at 50% 25%, rgba(182, 255, 26, .1), transparent 70%), #07050D; }
.jg-notado { clip-path: none; border: 1px solid transparent; border-image: var(--espina); background: #0B0817; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.jg-notado-1 { font: 700 12px/1.2 var(--font-display); letter-spacing: .16em; }

/* ---------- foco: hueso (frío), nunca verde ---------- */
.kw-todo:focus-visible, .cj-volver:focus-visible, .video-pie a:focus-visible, .kw-drop-btn:focus-visible, .tarjeta-btn:focus-visible { outline: 2px solid var(--hueso); outline-offset: 3px; }
.nodo3d.revelado:focus-visible .nodo-foto, .nodo3d.nodo-senal:not(.revelado):focus-visible .senal, .nodo:focus-visible .nodo-et { outline: 2px solid var(--hueso); }
.mapa-lienzo:focus-visible { box-shadow: inset 0 0 0 2px rgba(236, 229, 214, .7); }

/* ---------- móvil: margen de 16 px, sin scroll horizontal ---------- */
body { overflow-x: clip; }
@media (max-width: 759px) {
  .cj-cab { padding: 0 8px 0 16px; }
  .cj-sec-b { padding: 8px 16px; }
  .cj-pan { padding: 2px 16px 20px; }
  .cj-volver { margin: 4px 16px; }
  .cj-pie { padding: 16px 16px 12px; }
  .aviso-btn { padding: 4px 16px; }
  .logo .logo-img, .logo img { height: 36px; }
  .cj-nom { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .glitch-logo img:first-child { animation: none; }
  .menu-btn, .boton, .jg-btn, .entrada-btn, .cj-sec-b, .cj-nom { transition: none; }
}

/* contenedores que reciben el foco por programa (tabindex="-1"): sin anillo */
[tabindex="-1"]:focus-visible, .ficha-caja:focus-visible, .kw-pan:focus-visible, .cj-pan:focus-visible { outline: none; }
@media (max-width: 420px) {
  .entrada-centro { padding: 24px 16px; }
  .entrada-coord { letter-spacing: .06em; }
  .entrada-titulo .mono { display: block; line-height: 1.9; letter-spacing: .18em; font-size: 12px; }
  .entrada-btn { padding: 16px 26px; font-size: 14px; }
}
/* móvil: arriba solo logo + 琪拉 (la ciudad y la hora ya van en la línea de misión, a la derecha) */
@media (max-width: 759px) {
  body[data-vista="mapa"] .logo-sub { display: none; }
  .logo-zh { font-size: 14px; }
}
/* recompensa de los juegos: la cifra brilla en verde (es un hallazgo), sin doble sombra de glitch */
.jg-cifra { font-family: var(--font-display); font-weight: 800; font-size: 60px; letter-spacing: .02em; text-shadow: 0 0 22px rgba(182, 255, 26, .35); }

/* ---------- [P-095] título «CHONGQING · 重庆 · hora»: fuera el verde Matrix, hueso y violeta como la cabecera ---------- */
.mision-sub, .mision.linea .mision-sub { font: 400 12px/1.4 var(--font-mono); letter-spacing: .2em; color: var(--hueso); text-shadow: 0 0 6px rgba(116, 64, 255, .55), 0 0 2px #000; }
.mision.linea .mision-sub { opacity: .85; }
.mision-car { background: var(--violeta-texto); box-shadow: 0 0 6px rgba(116, 64, 255, .7); }

/* ---------- [P-095] rótulos del mapa (los pinta el bundle): Syne para nombres, Plex para datos, Noto Sans SC para el chino ---------- */
.rotulo3d { text-shadow: 0 0 8px #07050D, 0 0 2px #07050D; }
.rotulo3d .r-en { font-family: var(--font-display); font-weight: 700; color: var(--hueso); }
.rotulo3d .r-zh { font-family: var(--font-zh); font-weight: 400; color: var(--violeta-texto); letter-spacing: .2em; }
.r-distrito .r-en { font-size: 15px; letter-spacing: .3em; color: rgba(236, 229, 214, .86); }
.r-rio .r-en { font: 400 10px/1 var(--font-mono); font-style: normal; letter-spacing: .4em; color: var(--violeta-texto); }
.r-menor .r-en { font-size: 10px; font-weight: 600; letter-spacing: .14em; color: rgba(236, 229, 214, .7); }
.r-menor .r-zh { font-size: 9px; }
/* etiquetas de drops e hitos: panel fino con remate de espina */
.nodo3d .nodo-et { font-family: var(--font-display); font-weight: 700; color: var(--hueso); background: rgba(13, 9, 24, .9); border: 1px solid transparent; border-image: var(--espina); box-shadow: 0 0 10px rgba(116, 64, 255, .3); }
.nodo3d .nodo-et .num, .nodo3d .nodo-et .et-l2 { font-family: var(--font-mono); font-weight: 500; color: var(--gusano); }
.nodo3d.revelado .nodo-et { border-image: var(--espina-verde); }
.nodo3d.nodo-hq .nodo-et { border-image: var(--espina-hueso); background: rgba(36, 16, 79, .92); }
/* distancias y avisos de borde «! ??? 0.9 KM» */
.nodo3d.fuera .nodo-fuera { font-family: var(--font-mono); font-weight: 400; letter-spacing: .08em; color: var(--hueso); background: rgba(13, 9, 24, .88); }
.nodo3d.fuera .nodo-fuera .km { color: var(--plata); }
.nodo3d.fuera:not(.revelado) .nodo-fuera b { color: var(--violeta-texto); }
.nodo3d.fuera.revelado .nodo-fuera b { color: var(--gusano); }
.senal-cod { font-family: var(--font-mono); letter-spacing: .14em; color: rgba(168, 139, 255, .85); }
.hz-cuenta { font-family: var(--font-mono); color: var(--hueso); }
.hz-cuenta b { color: var(--gusano); }
.atribucion { font-family: var(--font-mono); }
@media (max-width: 759px) {
  .rotulo3d .r-zh { font-size: 10px; }
  .r-distrito .r-en { font-size: 16px; }
  .nodo3d .nodo-et { font-size: 13px; }
}
@media (max-width: 759px) {
  /* el título no pisa la cabecera (logo + 琪拉) */
  .mision { top: calc(var(--cab) + 6px); right: 10px; }
  .mision-sub, .mision.linea .mision-sub { font-size: 10px; letter-spacing: .12em; margin-top: 0; }
}

/* ---------- [P-096] últimos restos del estilo viejo → guía v1 (hueso y violeta; verde solo en hallazgos y CTA) ---------- */
/* cursor de coordenadas */
.kc3 .kc-cruz { filter: drop-shadow(0 0 2px rgba(116, 64, 255, .7)) drop-shadow(0 0 1px #07050D); }
.kc3 .kc-brazo { stroke: var(--hueso); }
.kc3 .kc-pix { fill: var(--violeta-texto); }
.kc3.kc-lock .kc-brazo { stroke: var(--gusano); }
.kc3.kc-lock .kc-pix { fill: var(--gusano); }
.kc3 .kc-coord { font: 400 10px/1 var(--font-mono); letter-spacing: .08em; color: rgba(236, 229, 214, .6); text-shadow: 0 0 3px #07050D; }
/* secretos (DIG THE BALE / ENTER CODE): panel de espina, texto hueso; el icono conserva un punto de luz */
.sc-et { font: 500 11px/1.2 var(--font-mono); letter-spacing: .14em; color: var(--hueso); background: rgba(13, 9, 24, .9); border: 1px solid transparent; border-image: var(--espina); padding: 4px 8px; }
.sc-ico { color: var(--violeta-texto); filter: drop-shadow(0 0 3px rgba(116, 64, 255, .7)); }
.sc-codigo .sc-ico { color: var(--violeta-texto); }
.sc-halo { background: radial-gradient(circle, rgba(116, 64, 255, .22), transparent 64%); }
.secreto.cerca .sc-halo { background: radial-gradient(circle, rgba(116, 64, 255, .32), transparent 66%); }
.secreto:hover .sc-ico, .secreto:focus-visible .sc-ico { filter: drop-shadow(0 0 8px var(--gusano)); color: var(--gusano); }
/* avisos de borde de drops ya vistos («SEEN IN EP.0 DANZISHI 1.5 KM»): hueso; el verde queda en un punto */
.nodo3d .f-revelado b, .nodo3d.fuera.revelado .nodo-fuera b { color: var(--hueso); font-weight: 500; }
.nodo3d.fuera.revelado .nodo-fuera::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; vertical-align: 1px; background: var(--gusano); border-radius: 50%; }
.nodo3d.fuera .nodo-fuera, .nodo3d.fuera .nodo-fuera * { font-family: var(--font-mono); }
.nodo3d .flecha { color: var(--violeta-texto); }
/* HUD inferior izquierda (CHONGQING · CLEAR) */
.vivo-hud, .mh .vivo-hud { font: 600 11px/1.2 var(--font-display); letter-spacing: .22em; color: rgba(236, 229, 214, .72); text-shadow: 0 0 4px #07050D; }
/* marcador de Kira HQ: fuera el rombo con «!»; sello oscuro con el logo como los drops, borde hueso */
.nodo-hq .senal-rombo {
  transform: none; top: 22px; width: 58px; height: 36px; margin: -18px 0 0 -29px; border: 1.5px solid rgba(236, 229, 214, .85); border-radius: 3px;
  background: rgba(36, 16, 79, .92); box-shadow: inset 0 0 6px rgba(116, 64, 255, .6); animation: senal-pulso 3.4s ease-in-out infinite;
}
.nodo-hq .senal-rombo::before { content: ""; position: absolute; left: 2px; right: 2px; top: 1px; height: 26px; background: var(--hueso); -webkit-mask: url("../img/logo-kira-08.svg") center / contain no-repeat; mask: url("../img/logo-kira-08.svg") center / contain no-repeat; }
.nodo-hq .senal-rombo::after { display: none; }
.nodo-hq .senal-ex { display: none; }
.nodo-hq .senal-flash { transform: scale(.7); border-color: rgba(236, 229, 214, .6); }
/* regla anti-solape (src/despeje.js): lo que pierde la prioridad se oculta con suavidad */
.tapado { opacity: 0 !important; pointer-events: none !important; transition: opacity .2s; }
/* el título queda fuera de la franja de rótulos 3D: sube por encima y lleva fondo propio */
.mision { z-index: 16; }
.mision.linea .mision-sub { background: rgba(7, 5, 13, .7); padding: 2px 8px; }

/* ---------- [P-097] abogado del diablo ---------- */
/* sin rosetón detrás del logo de la entrada (la guía prohíbe cruces en la identidad); fuera también en el cajón y el retrato */
.entrada-ruido::before { display: none; }
.cj-cab::before { display: none; }
.kw-retrato { background: radial-gradient(ellipse at 50% 30%, rgba(116, 64, 255, .35), transparent 65%), #08060F; }
/* línea de producto clara bajo el logo de la entrada */
.entrada-producto { margin: 10px 0 0; font: 400 13px/1.4 var(--font-mono); letter-spacing: .08em; color: var(--hueso); text-align: center; }
/* CTA de compra siempre encendido en verde (en el móvil no hay hover) */
.compra .boton:not([disabled]) { background: var(--gusano); color: var(--negro); border-image: var(--espina-verde); font-weight: 700; }
.compra .boton:not([disabled]):hover, .compra .boton:not([disabled]):focus-visible { background: #CBFF5A; color: var(--negro); }
/* ficha en el móvil: primero nombre, precio y CTA; después el diario de ficción */
@media (max-width: 759px) {
  .ficha-texto { display: flex; flex-direction: column; }
  .ficha-texto > .real { order: -1; }
  .logo-txt { margin-left: 4px; }
  .entrada-producto { font-size: 12px; padding: 0 16px; }
}

/* ---------- [P-098] ficha minimalista: foto grande, nombre, precio, talla, disponibilidad y COMPRAR; el resto en acordeones ---------- */
.ficha-caja { border: 0 !important; border-image: none !important; background: #0A0812; }
.ficha-caja::before, .ficha-caja::after { display: none !important; }
.fv2-rejilla { gap: 0; }
.fv2-rejilla .galeria-principal img { aspect-ratio: 4 / 5; }
.fv2-rejilla .galeria-principal figcaption { font: 400 11px/1 var(--font-mono); letter-spacing: .12em; background: rgba(10, 8, 18, .8); }
.fv2-rejilla .galeria-minis { gap: 8px; padding: 10px 16px; }
.fv2-rejilla .mini { border: 1px solid rgba(236, 229, 214, .18); border-image: none; clip-path: none; }
.fv2-rejilla .mini[aria-current="true"] { border-color: var(--hueso); }
.fv2 { padding: 0; background: none; border: 0; }
.fv2-nombre { margin: 0 0 14px; font: 700 clamp(24px, 3.2vw, 34px)/1.12 var(--font-display); letter-spacing: .01em; text-transform: none; color: var(--hueso); }
.fv2-precio { margin: 0 0 14px; font: 500 30px/1 var(--font-mono); color: var(--hueso); }
.fv2-total { display: block; margin-top: 8px; font: 400 13px/1.3 var(--font-mono); letter-spacing: .02em; color: var(--plata); }
.fv2-linea { margin: 0 0 6px; font: 400 15px/1.4 var(--font-mono); color: var(--hueso); }
.fv2-disp { color: var(--plata); }
.fv2-disp.agot { color: var(--teja-texto); }
.fv2 .compra { margin: 22px 0 8px; border: 0; border-image: none; background: #0A0812; padding: 8px 0; box-shadow: none; }
.fv2 .compra .boton { min-height: 56px; font-size: 16px; letter-spacing: .14em; }
.fv2-nota { margin: 8px 0 0; font: 400 12px/1.4 var(--font-mono); color: var(--plata); border: 0; padding: 0; }
.fv2-acc { border-top: 1px solid rgba(236, 229, 214, .12); }
.fv2-acc:first-of-type { margin-top: 26px; }
.fv2-acc:last-of-type { border-bottom: 1px solid rgba(236, 229, 214, .12); margin-bottom: 14px; }
.fv2-acc summary { list-style: none; cursor: pointer; padding: 16px 0; font: 600 14px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--hueso); display: flex; justify-content: space-between; }
.fv2-acc summary::-webkit-details-marker { display: none; }
.fv2-acc summary::after { content: "+"; font-family: var(--font-mono); color: var(--plata); }
.fv2-acc[open] summary::after { content: "−"; }
.fv2-acc-in { padding: 0 0 18px; }
.fv2-acc-in .log, .fv2-acc-in .preventa-datos, .fv2-acc-in .precio-bloque { background: none !important; border: 0 !important; border-image: none !important; padding: 0; }
.fv2-acc-in .log-cab { font: 500 12px/1.4 var(--font-mono); letter-spacing: .1em; }
@media (min-width: 760px) {
  .fv2-rejilla { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .fv2-rejilla .ficha-texto { padding: 56px 44px 30px; }
  .fv2 .compra .compra-precio { display: none; }   /* el precio ya va grande arriba */
}
@media (max-width: 759px) {
  .fv2-rejilla .ficha-texto { padding: 22px 18px 0; }
  .fv2-nombre { font-size: 24px; }
  .fv2-precio { font-size: 26px; }
  /* barra de compra fija abajo: precio + COMPRAR siempre visibles */
  .fv2 .compra { margin: 0; padding: 10px 16px 8px; background: #0A0812; border-top: 1px solid rgba(236, 229, 214, .14); }
  .fv2 .compra .compra-inc { display: none; }
}
/* [P-098] el aviso «YOU'RE BEING NOTICED» y la barra de ayuda no conviven: mientras está el aviso, la ayuda se oculta */
body:has(.jg-notado:not([hidden])) .pistas { display: none; }
/* [P-098] un solo «CHONGQING» como identidad: el título de arriba a la derecha (Syne, con 重庆 y la hora).
   Fuera el de la cabecera bajo 琪拉, el de la barra inferior y el del HUD del tiempo (que queda como «CLEAR · 19°C»). */
.logo-sub, .es-ciudad { display: none !important; }
.mision-sub, .mision.linea .mision-sub { font: 600 13px/1.4 var(--font-display); letter-spacing: .2em; }
.mision-sub [lang], .mision-sub .zh { font-family: var(--font-zh); }
.vivo-hud:empty { display: none; }
.vivo-hud, .mh .vivo-hud, .es-vista, .es-vista-txt { font-family: var(--font-display); font-weight: 600; letter-spacing: .2em; }
@media (max-width: 759px) {
  .fv2-rejilla .galeria-principal img { aspect-ratio: auto; height: 50vh; object-fit: contain; background: #E9E6E1; }
  .fv2-rejilla .galeria-minis { flex-wrap: nowrap !important; overflow-x: auto; }
  .fv2-rejilla .mini { flex: none; width: 64px; }
}
.jg-notado { width: min(620px, calc(100vw - 24px)); }
.jg-notado-txt { flex: 1 1 auto; min-width: 0; }
.jg-notado-ir { flex: none; }
@media (max-width: 759px) {
  .fv2-rejilla { grid-template-columns: minmax(0, 1fr); }
  .fv2-rejilla > * { min-width: 0; }
  .fv2-rejilla .galeria-principal img { width: 100%; }
  .fv2-nombre { overflow-wrap: anywhere; }
}

/* ---------- tienda (14 oct 2026: checkout Shopify y arreglos de la auditoría móvil) ---------- */
/* «Notify me»: el mismo CTA, como enlace mailto */
a.boton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }
.boton.cargando { cursor: progress; color: var(--hueso); }
.boton.con-error { color: var(--hueso); border-image: var(--espina-hueso); }
.compra-error { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--hueso); border-left: 2px solid var(--teja); padding-left: 8px; }
.compra-error[hidden] { display: none; }
/* enlaces legales al pie de la ficha: sistema (hueso), pequeños y fríos */
.fv2-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0; font-size: 12px; }
.fv2-legal a, .fv2-legal button { color: var(--plata); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 6px 0; font: inherit; cursor: pointer; min-height: 24px; }
.fv2-legal a:hover, .fv2-legal a:focus-visible, .fv2-legal button:hover, .fv2-legal button:focus-visible { color: var(--hueso); }
/* LATEST DROP dentro de la pantalla de entrada: a un toque, sin pasar por el mapa */
.entrada-ultimo { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px auto 0; min-height: 44px; padding: 8px 18px;
  background: none; color: var(--hueso); border: 1px solid transparent; border-image: var(--espina-hueso); font-size: 12px; letter-spacing: .14em; cursor: pointer; }
.entrada-ultimo b { color: var(--gusano); font-weight: 400; }
.entrada-ultimo span { color: var(--plata); }
.entrada-ultimo:hover, .entrada-ultimo:focus-visible { border-image: var(--espina-verde); outline: none; }
.entrada-ultimo:focus-visible { outline: 1px solid rgba(236, 229, 214, .7); outline-offset: 4px; }
/* banner de cookies (solo si hay IDs de medición en js/tienda-config.js) */
.cookies { position: fixed; z-index: 120; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 12px); /* arriba: nunca tapa la barra de compra */ max-width: 520px; margin: 0 auto; padding: 12px 14px;
  background: rgba(7, 5, 13, .97); color: var(--hueso); border: 1px solid transparent; border-image: var(--espina-hueso); font-size: 12px; line-height: 1.45; }
.cookies-txt { margin: 0 0 10px; }
.cookies-txt a { color: var(--hueso); }
.cookies-bot { display: flex; gap: 10px; justify-content: flex-end; }
.cookies-bot button { min-height: 44px; min-width: 96px; padding: 0 14px; font: 400 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  background: none; color: var(--hueso); border: 1px solid rgba(236, 229, 214, .45); }
.cookies-bot button:hover, .cookies-bot button:focus-visible { border-color: var(--hueso); outline: none; }
.cookies-bot button:focus-visible { outline: 2px solid var(--hueso); outline-offset: 2px; }