/* =====================================================================
   SEIXMUNDOS · MOTOR DE MUNDOS POR CAPAS — hoja de estilos base
   ---------------------------------------------------------------------
   El tema de cada plataforma se aplica con variables CSS: el archivo
   mundo.js de cada mundo declara `tema.vars` y el motor las inyecta en
   :root al arrancar. Ningún color de plataforma vive en esta hoja.
   Variables que un tema puede definir:
     --fondo-pagina  --tinta  --suave  --primario  --primario-osc
     --primario-claro  --borde-claro  --sombra-tinta (r,g,b)
     --avatar-a  --avatar-b (degradado del avatar del guía)
   Los colores de los puntos de interés NO van aquí: cada mundo declara
   su paleta en `tema.paleta` y el motor pinta cada punto en línea.
   ---------------------------------------------------------------------
   PULIDO VISUAL DEL MUSEO · 2026-11-05 (Fase 5): acabado de la interfaz —
   barras en azul profundo del ambiente con filete dorado, puntos de
   interés como medallones con anillo de latón y luz interior, tarjeta
   del guía en marfil cálido, botones y navegación con volumen. Solo
   acabado: mismos selectores, misma estructura, mismo comportamiento.
   ===================================================================== */
:root{
  --fondo-pagina:#f2f5f9;
  --tinta:#1d2733;
  --suave:#4a5a6a;
  --primario:#2f6df0;
  --primario-osc:#1c4fb8;
  --primario-claro:#e8f0fe;
  --borde-claro:#d8e4f7;
  --sombra-tinta:20,45,80;
  --avatar-a:#5aa2ff;
  --avatar-b:#2f6df0;
  --amarillo-claro:#fff7db;
  --sombra:0 10px 30px rgba(var(--sombra-tinta),.18);
  --r:18px;
  --barra-a:#0e2347;
  --barra-b:#081831;
  --laton:#d9a441;
  --laton-claro:#f2d492;
  --marfil:#fffdf7;
  --marfil2:#f7edd6;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:var(--fondo-pagina);color:var(--tinta);line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
.phone{
  max-width:430px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;
  background:#0a1830;box-shadow:0 0 54px rgba(4,12,24,.55),0 0 0 1px rgba(217,164,65,.22);
  position:relative;overflow:hidden;
}
/* Cuando la página anfitriona reparte la ventana en columna (cabecera +
   superficie + pie en un solo 100dvh, como el index del museo), la
   superficie cede su altura fija y ocupa el tramo que le toca: ningún
   elemento fijo queda montado sobre el contenido. */
body.columna-ventana .phone{height:auto}
/* ---------- barra superior ---------- */
.topbar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:linear-gradient(180deg,var(--barra-a),var(--barra-b));
  border-bottom:2px solid rgba(217,164,65,.55);
  box-shadow:0 6px 20px rgba(4,12,24,.4);z-index:30;flex:0 0 auto;
}
.logo{font-weight:900;font-size:21px;letter-spacing:.02em;color:#eef4fd;white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.45)}
.logo b{color:var(--laton-claro)}
.demotag{
  font-size:10px;font-weight:800;letter-spacing:.12em;color:#7c4a03;
  background:linear-gradient(180deg,#fff3c4,var(--amarillo-claro));border:1px solid #d9a441;border-radius:99px;
  padding:4px 9px;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 6px rgba(4,12,24,.3);
}
.langsel{margin-left:auto;display:flex;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);
  border-radius:99px;padding:3px;gap:2px}
.langsel button{
  border:0;background:transparent;font:inherit;font-weight:800;font-size:12.5px;color:#cfe1f7;
  padding:5px 11px;border-radius:99px;cursor:pointer;transition:background .2s ease,color .2s ease;
}
.langsel button.on{background:linear-gradient(180deg,#2f7fe0,var(--primario-osc));color:#fff;
  box-shadow:0 2px 8px rgba(4,12,24,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.mapbtn{
  border:1px solid rgba(217,164,65,.4);background:rgba(255,255,255,.12);color:#f2e7c8;font:inherit;font-weight:800;
  font-size:12.5px;padding:8px 11px;border-radius:99px;cursor:pointer;white-space:nowrap;
  transition:background .2s ease;
}
.mapbtn:hover{background:rgba(255,255,255,.2)}
/* ---------- escenario ---------- */
.stage{position:relative;flex:1 1 auto;overflow:hidden;background:#0a1830}
.bglayer{
  position:absolute;inset:0;background-size:cover;background-position:center 38%;
  opacity:0;transition:opacity .55s ease;will-change:transform,opacity;
}
.bglayer.on{opacity:1;animation:kb 14s ease-in-out infinite alternate}
.bglayer video,.bglayer canvas,.bglayer iframe{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;
}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
.shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,20,35,.34) 0%,rgba(8,20,35,0) 22%,rgba(8,20,35,0) 60%,rgba(8,20,35,.38) 100%);
}
.scenetitle{position:absolute;top:14px;left:14px;right:14px;z-index:5;pointer-events:none}
.scenetitle .kicker{
  display:inline-block;background:linear-gradient(180deg,#fffaf0,rgba(255,247,219,.94));color:#7a5f22;
  font-size:11px;font-weight:800;letter-spacing:.13em;padding:4px 10px;border-radius:99px;
  border:1px solid rgba(217,164,65,.6);box-shadow:0 3px 10px rgba(4,12,24,.35),inset 0 1px 0 rgba(255,255,255,.8);
}
.scenetitle h1{
  margin-top:8px;color:#fff;font-size:30px;line-height:1.12;font-weight:900;letter-spacing:.01em;
  text-shadow:0 2px 14px rgba(8,25,45,.6),0 1px 3px rgba(8,25,45,.55);max-width:92%;
}
/* Corrección 2026-11-06: el título de la sala nunca comparte franja con
   piezas ni flechas — su franja (kicker + título, con tope del 30 % del
   escenario) queda libre de puntos de interés: las piezas viven del
   centro del mural hacia abajo. */
.stage.franja-titulo .scenetitle{z-index:12}
.stage.franja-titulo .hotspot{visibility:hidden;pointer-events:none}
/* la flecha lateral tampoco entra en la franja del título */
.edge{z-index:7}
.progress{
  position:absolute;top:14px;right:14px;z-index:6;color:var(--tinta);
  background:linear-gradient(180deg,#fffaf0,rgba(255,247,219,.94));
  font-size:12px;font-weight:800;border-radius:99px;padding:5px 11px;
  border:1px solid rgba(217,164,65,.55);box-shadow:0 3px 10px rgba(4,12,24,.3);
}
/* puntos de interés — medallones del mundo: anillo de latón, luz interior.
   Desde 2026-11-06 cada medallón lleva su NOMBRE en pastilla bajo el ícono:
   la pieza se entiende sin tocarla (orden del fundador). */
.hotspot{
  position:absolute;z-index:8;transform:translate(-50%,-50%);max-width:46%;
  border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:4px;padding:0;font-family:inherit;
  transition:transform .18s ease;
}
.hs-medal{
  width:46px;height:46px;flex:0 0 auto;border-radius:50%;
  border:3px solid #f6e7bd;display:flex;align-items:center;justify-content:center;
  font-size:21px;color:#fff;
  box-shadow:inset 0 2px 5px rgba(255,255,255,.5),inset 0 -7px 12px rgba(0,0,0,.3),
    0 8px 20px rgba(4,16,32,.5),0 0 0 1px rgba(122,95,34,.35);
  animation:pulse 2.2s ease-out infinite;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.hs-nombre{
  max-width:100%;text-align:center;font-size:11px;font-weight:800;line-height:1.25;
  color:#20303f;background:linear-gradient(180deg,#fffaf0,rgba(255,247,219,.96));
  border:1px solid rgba(217,164,65,.65);border-radius:99px;padding:3px 8px;
  box-shadow:0 3px 10px rgba(4,16,32,.35);
}
.hotspot:active{transform:translate(-50%,-50%) scale(.94)}
.hotspot.seen .hs-medal{animation:none;opacity:.94}
.hotspot.seen .hs-medal::after{
  content:"✓";position:absolute;top:-7px;right:-7px;width:19px;height:19px;border-radius:50%;
  background:linear-gradient(180deg,#fffaf0,#f2d492);color:#7a5f22;font-size:12px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.8);
}
.hs-medal{position:relative}
@keyframes pulse{
  0%{box-shadow:inset 0 2px 5px rgba(255,255,255,.5),inset 0 -7px 12px rgba(0,0,0,.3),0 0 0 0 rgba(233,196,106,.55),0 8px 20px rgba(4,16,32,.5)}
  70%{box-shadow:inset 0 2px 5px rgba(255,255,255,.5),inset 0 -7px 12px rgba(0,0,0,.3),0 0 0 17px rgba(233,196,106,0),0 8px 20px rgba(4,16,32,.5)}
  100%{box-shadow:inset 0 2px 5px rgba(255,255,255,.5),inset 0 -7px 12px rgba(0,0,0,.3),0 0 0 0 rgba(233,196,106,0),0 8px 20px rgba(4,16,32,.5)}
}
/* flechas laterales — discos de marfil del ambiente */
.edge{
  position:absolute;top:64%;z-index:9;width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(217,164,65,.65);
  background:linear-gradient(180deg,#fffdf6,#f1e5c8);color:var(--primario-osc);font-size:22px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(4,16,32,.45),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .18s ease;
}
.edge:active{transform:scale(.93)}
.edge.prev{left:10px}.edge.next{right:10px}
.edge[hidden]{display:none}
/* ---------- guía — la tarjeta del Curador, en marfil cálido ---------- */
.guide{
  flex:0 1 auto;min-height:0;max-height:52%;overflow-y:auto;border-top:2px solid rgba(217,164,65,.6);
  background:linear-gradient(180deg,var(--marfil),var(--marfil2));
  box-shadow:0 -10px 26px rgba(4,16,32,.28);
  padding:10px 14px 8px;z-index:20;position:relative;
}
.guide-row{display:flex;gap:10px;align-items:flex-start}
.avatar{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--avatar-a),var(--avatar-b));color:#fff;font-weight:900;font-size:14px;
  display:flex;align-items:center;justify-content:center;border:2px solid #f6e7bd;
  box-shadow:0 5px 14px rgba(var(--sombra-tinta),.45),inset 0 1px 2px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.28);
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.guide-body{flex:1;min-width:0}
.guide-name{font-size:12px;font-weight:800;color:var(--primario-osc);letter-spacing:.04em}
.guide-text{font-size:14.5px;color:var(--tinta);margin-top:1px}
.guide-text b{color:var(--primario-osc)}
.guide-text .gain{display:block;margin-top:3px;font-size:13px;color:var(--suave)}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.chips[hidden]{display:none}
.chip{
  border:2px solid var(--primario);background:var(--primario-claro);color:var(--primario-osc);
  font:inherit;font-size:12.5px;font-weight:800;border-radius:99px;padding:6px 11px;cursor:pointer;
  box-shadow:0 3px 8px rgba(var(--sombra-tinta),.18),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .18s ease,background .2s ease;
}
.chip:hover{background:#fff;transform:translateY(-1px)}
/* opciones de decisión (mundos con ramificación) */
.opciones{display:flex;flex-direction:column;gap:8px;margin-top:9px}
.opciones[hidden]{display:none}
.opcion{
  border:2px solid var(--primario);color:var(--tinta);
  background:linear-gradient(180deg,#ffffff,#fdf6e3);
  font:inherit;font-size:14px;font-weight:800;border-radius:14px;padding:11px 13px;cursor:pointer;
  text-align:left;box-shadow:0 4px 12px rgba(var(--sombra-tinta),.16),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .18s ease,box-shadow .2s ease;
}
.opcion:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(var(--sombra-tinta),.2),inset 0 1px 0 rgba(255,255,255,.8)}
.opcion:active{background:var(--primario-claro)}
/* cierre / acción final */
.cierre{
  margin-top:10px;border:1.5px solid rgba(217,164,65,.55);border-radius:var(--r);
  background:linear-gradient(180deg,#eef3fd,#f6ecd2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px rgba(var(--sombra-tinta),.14);
  padding:12px;display:none;
}
.cierre.on{display:block}
.cierre h2{font-size:16.5px;font-weight:900;color:var(--tinta)}
.cierre p{font-size:13.5px;color:var(--suave);margin:3px 0 10px}
.cierre .btns{display:flex;gap:9px;flex-wrap:wrap}
.btn{
  flex:1 1 150px;text-align:center;text-decoration:none;font-weight:900;font-size:15px;
  border-radius:14px;padding:13px 12px;cursor:pointer;border:0;font-family:inherit;display:block;
  transition:transform .18s ease,box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-principal{background:linear-gradient(180deg,#2f7fe0,var(--primario-osc));color:#fff;
  box-shadow:0 8px 20px rgba(var(--sombra-tinta),.4),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-secundario{background:linear-gradient(180deg,#ffffff,#fdf6e3);color:var(--primario-osc);
  border:2px solid var(--primario);box-shadow:0 4px 12px rgba(var(--sombra-tinta),.16)}
/* ---------- navegación inferior ---------- */
/* Corrección 2026-11-06: la fila cabe SIEMPRE al 100 % del ancho visible —
   los puntos ocupan el centro flexible en hasta dos filas y ningún botón
   queda fuera ni cortado (antes el botón derecho salía del área visible). */
.bottombar{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,var(--barra-a),var(--barra-b));
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(217,164,65,.45);
  box-shadow:0 -6px 20px rgba(4,12,24,.35);z-index:20;
}
.navbtn{
  flex:0 1 auto;min-width:0;border:1px solid rgba(255,255,255,.14);cursor:pointer;font:inherit;font-weight:900;font-size:13.5px;border-radius:13px;
  padding:11px 10px;background:rgba(255,255,255,.12);color:#dbe7f5;line-height:1.15;
  transition:background .2s ease,transform .18s ease;
}
.navbtn:active{transform:scale(.97)}
.navbtn.main{flex:0 1 auto;background:linear-gradient(180deg,#2f7fe0,var(--primario-osc));color:#fff;border-color:transparent;
  box-shadow:0 8px 20px rgba(4,12,24,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.navbtn[disabled]{opacity:.38;box-shadow:none}
.dots{display:flex;flex:1 1 auto;min-width:0;flex-wrap:wrap;gap:5px;margin:0 auto;justify-content:center;align-content:center}
.dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:rgba(255,255,255,.32);border:0;padding:0;cursor:pointer;
  transition:transform .2s ease,background .2s ease}
.dot.on{background:var(--laton-claro);transform:scale(1.35);box-shadow:0 0 10px rgba(233,196,106,.65)}
/* ---------- mapa de escenas ---------- */
.mapoverlay{
  position:absolute;inset:0;z-index:40;
  background:linear-gradient(180deg,#fffdf7,#f6ecd4);
  padding:18px 16px;overflow-y:auto;display:none;
}
.mapoverlay.on{display:block}
.mapoverlay h2{font-size:21px;font-weight:900;margin-bottom:4px}
.mapoverlay p{font-size:13.5px;color:var(--suave);margin-bottom:14px}
.mapgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.mapcard{
  border:2px solid #e6d6ab;border-radius:15px;overflow:hidden;cursor:pointer;background:#fff;
  text-align:left;font:inherit;padding:0;
  box-shadow:0 5px 14px rgba(var(--sombra-tinta),.16);
  transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease;
}
.mapcard:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(var(--sombra-tinta),.22)}
.mapcard .th{height:96px;background-size:cover;background-position:center}
.mapcard .tx{padding:8px 10px;font-weight:800;font-size:13.5px;color:var(--tinta)}
.mapcard.cur{border-color:var(--laton);box-shadow:0 8px 20px rgba(var(--sombra-tinta),.28),0 0 0 1px rgba(217,164,65,.5)}
.mapclose{
  margin-top:16px;width:100%;border:0;color:#fff;font:inherit;font-weight:900;
  background:linear-gradient(180deg,#2f7fe0,var(--primario-osc));
  font-size:15px;border-radius:13px;padding:13px;cursor:pointer;
  box-shadow:0 8px 20px rgba(var(--sombra-tinta),.35),inset 0 1px 0 rgba(255,255,255,.3);
}
@media (max-width:430px){
  .demotag{display:none}
  .logo{font-size:19px}
  .scenetitle{right:96px}
}