/* AR con el letrero: cámara a pantalla completa con controles encima */
:root{--bg:#0f1b2d;--card:#14243b;--fg:#eef2f8;--amber:#e8a33d;--ink:#0f1b2d}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--fg);font:18px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#ar{position:fixed;inset:0}
.barra{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:12px;z-index:20;background:linear-gradient(#000a,#0000)}
.volver{color:#fff;text-decoration:none;font-weight:800;background:#0f1b2dcc;padding:8px 14px;border-radius:99px}
.estado{background:#0f1b2dcc;padding:6px 12px;border-radius:99px;font-size:15px}
/* recuadro guía mientras busca el letrero */
.buscar{position:fixed;inset:0;display:grid;place-items:center;align-content:center;gap:14px;z-index:10;pointer-events:none;text-align:center;padding:20px}
.buscar p{background:#0f1b2dcc;padding:10px 16px;border-radius:14px;margin:0}
.marco{width:80vw;max-width:420px;aspect-ratio:1.41;border:4px dashed #fff9;border-radius:18px}
.oculto{display:none!important}
/* números sobre la maqueta */
.punto{position:fixed;z-index:15;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:3px solid #fff;background:var(--amber);color:var(--ink);font:900 19px system-ui;box-shadow:0 2px 10px #000a;padding:0}
.punto.activo{background:#fff}
/* zorrito y globo */
.mascota{position:fixed;left:10px;right:10px;bottom:14px;z-index:25;display:flex;align-items:flex-end;gap:8px}
.avatar{width:84px;height:84px;border-radius:50%;border:0;padding:0;background:none;flex:none}
.avatar img{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 6px #000a)}
.avatar.habla{animation:habla .35s ease-in-out infinite alternate}
@keyframes habla{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-6px) rotate(3deg)}}
.globo{flex:1;background:#fff;color:var(--ink);border-radius:16px 16px 16px 4px;padding:10px 12px;font-size:17px;box-shadow:0 4px 12px #0008;max-height:34vh;overflow:auto;margin-bottom:24px}
.globo b{display:block;font-size:18px}
.silencio{position:absolute;right:0;top:-50px;width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:#14243bcc;color:#fff;font-size:20px}
/* pantalla inicial */
.inicio{position:fixed;inset:0;z-index:30;background:var(--bg);display:grid;place-content:center;gap:14px;padding:24px;text-align:center}
.inicio h1{margin:0;font-size:28px}
.inicio button{min-height:60px;border:0;border-radius:16px;background:var(--amber);color:var(--ink);font:900 20px system-ui;padding:0 24px}