/* ═══════════════════════════════════════════════════════════════════════
   RETOS EN LA PLAZA (mockups/retos-en-la-plaza.html pantallas 1 a 4; js/lugares.js; plan RETOS-EN-LA-PLAZA.md)
   El pin del lugar en el mapa de Retos (la figura dorada con los íconos de los premios en abanico), la hoja del lugar, la pastilla
   "Estás en…", la tarjeta con la figura y el vale. Tokens de piel.css: un solo acento, tinta y grises; el oro es el de los
   monumentos. Íconos de trazo, nada por debajo de 12 px.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --lg-oro: #C9A227; --lg-oro-osc: #8A6D12; --lg-oro-bg: #E7DFC9;
  --lg-acc-suave: var(--acc-soft, rgba(240, 115, 58, .14));
}
.lg-trazo { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── El pin del lugar en el mapa ── */
/* La raíz del marcador mide 0×0 y se ancla en su centro; el pin cuelga de ella (mismo recurso que el mockup). Se esconde con el radar,
   en Pintar y fuera de la pestaña Retos (js/lugares.js pone body.lg-fuera). */
.lgm { width: 0; height: 0; z-index: 3; }
body.radar-on .lgm, body.pintando .lgm, body.lg-fuera .lgm { display: none !important; }
.lg-cartel-off { display: none !important; }
.lg { position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lg:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 50%; }
.lg .fig { width: 46px; height: 46px; border-radius: 50%; background: var(--lg-oro-bg); border: 3px solid var(--lg-oro); box-shadow: 0 6px 14px rgba(31, 29, 26, .32); overflow: hidden; display: grid; place-items: center; color: var(--lg-oro-osc); position: relative; z-index: 3; }
.lg .fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg .fig .lg-trazo { width: 24px; height: 24px; stroke-width: 1.8; }
.lg .sello { position: absolute; right: -5px; top: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--lg-oro); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surf, #fff); z-index: 4; }
.lg .sello .lg-trazo { width: 11px; height: 11px; stroke-width: 2.2; }
.lg .nombre { position: absolute; left: 50%; top: 50px; transform: translateX(-50%); background: var(--surf, #fff); color: var(--ink); border-radius: 999px; padding: 4px 10px; box-shadow: 0 4px 12px rgba(31, 29, 26, .16); white-space: nowrap; font-size: 12px; font-weight: 500; line-height: 1.2; z-index: 3; }
.lg .nombre small { font-size: 12px; color: var(--acc); font-weight: 500; }
/* Los premios: círculos de 30 px en arco sobre la figura. Tres y "+N". */
.lg .premios { position: absolute; left: 23px; top: 23px; width: 0; height: 0; z-index: 2; }
.lg .pr { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--surf, #fff); border: 2px solid var(--acc); color: var(--ink); display: grid; place-items: center; box-shadow: 0 4px 10px rgba(31, 29, 26, .2); overflow: hidden; transition: transform .3s; }
.lg .pr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg .pr .lg-trazo { width: 17px; height: 17px; stroke-width: 1.8; }
.lg .pr.mas { background: var(--ink); color: var(--surf, #fff); border-color: var(--ink); font-size: 12px; font-weight: 500; }
.lg .pr.agotado { filter: grayscale(1); opacity: .55; border-color: var(--muted2, #A19C94); }
.lg .pr:nth-child(1) { transform: translate(-36px, -30px); }
.lg .pr:nth-child(2) { transform: translate(0, -44px); }
.lg .pr:nth-child(3) { transform: translate(36px, -30px); }
.lg .pr:nth-child(4) { transform: translate(44px, 4px); }
.lg .premios.n1 .pr:nth-child(1) { transform: translate(0, -44px); }
.lg .premios.n1 .pr:nth-child(2) { transform: translate(44px, 4px); }
.lg .premios.n2 .pr:nth-child(1) { transform: translate(-20px, -40px); }
.lg .premios.n2 .pr:nth-child(2) { transform: translate(20px, -40px); }
.lg .premios.n2 .pr:nth-child(3) { transform: translate(44px, 4px); }
.lg .late { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--lg-oro); animation: lg-pulso 2.2s ease-out infinite; z-index: 1; pointer-events: none; }
@keyframes lg-pulso { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lg .late { animation: none; opacity: .5; } .lg .pr { transition: none; } }
/* Al acercar el mapa (zoom ≥ 16,5): la etiqueta del descuento junto a cada ícono (a su lado: izquierda, arriba y derecha del abanico). */
.lg .etiquetas { display: none; position: absolute; left: 23px; top: 23px; width: 0; height: 0; z-index: 5; pointer-events: none; }
.lg.cerca .etiquetas { display: block; }
.lg .etiquetas span { position: absolute; left: 0; top: 0; background: var(--surf, #fff); color: var(--ink); border-radius: 10px; padding: 3px 8px; font-size: 12px; font-weight: 500; line-height: 1.2; box-shadow: 0 3px 10px rgba(31, 29, 26, .16); white-space: nowrap; }
.lg .etiquetas span b { color: var(--acc); font-weight: 500; }
.lg .etiquetas span.agotado { opacity: .55; }
.lg .etiquetas.n3 span:nth-child(1) { transform: translate(-56px, -30px) translate(-100%, -50%); }
.lg .etiquetas.n3 span:nth-child(2) { transform: translate(0, -72px) translate(-50%, -50%); }
.lg .etiquetas.n3 span:nth-child(3) { transform: translate(56px, -30px) translate(0, -50%); }
.lg .etiquetas.n2 span:nth-child(1) { transform: translate(-40px, -40px) translate(-100%, -50%); }
.lg .etiquetas.n2 span:nth-child(2) { transform: translate(40px, -40px) translate(0, -50%); }
.lg .etiquetas.n1 span:nth-child(1) { transform: translate(0, -72px) translate(-50%, -50%); }

/* ── Botones y piezas comunes de las hojas ── */
.lg-hoja .lg-btn, .lg-tarjeta .lg-btn, .lg-vale .lg-btn, .lg-btn-detalle { min-height: 50px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--acc); color: var(--acc-ink, #fff) !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; }
.lg-btn.sec { background: var(--field, #F4F1EB) !important; color: var(--ink) !important; box-shadow: 0 0 0 1px var(--line, rgba(31, 29, 26, .08)); }
.lg-btn:disabled { opacity: .55; cursor: default; }
.lg-btn.chico { min-height: 40px; font-size: 14px; padding: 0 14px; }
.lg-btn .lg-trazo { width: 18px; height: 18px; }
.lg-btn-detalle { width: 100%; }
.lg-acciones { display: flex; gap: 10px; margin-top: 12px; }
.lg-acciones .lg-btn { flex: 1; min-width: 0; }
.lg-pildora { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--lg-oro-bg); color: var(--lg-oro-osc); }
.lg-pildora .lg-trazo { width: 14px; height: 14px; }
.lg-error { margin: 8px 0 0; color: #B3382C; font-size: 13px; line-height: 1.4; text-align: center; }
.lg-error:empty { display: none; }

/* ── La hoja del lugar (pantalla 2) ── */
.lg-hoja .lg-cab { display: flex; gap: 12px; align-items: center; }
.lg-figura { width: 58px; height: 58px; border-radius: 18px; background: var(--lg-oro-bg); border: 2px solid var(--lg-oro); overflow: hidden; flex: none; display: grid; place-items: center; color: var(--lg-oro-osc); }
.lg-figura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-figura .lg-trazo { width: 28px; height: 28px; }
.lg-hoja .lg-cab h3 { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.15; }
.lg-hoja .lg-cab small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.lg-hoja .lg-sub { font-size: 13px; color: var(--muted); margin: 12px 0 6px; }
.lg-hoja .lg-sub b { color: var(--ink); font-weight: 500; }
.lg-premio { display: flex; width: 100%; gap: 12px; align-items: center; padding: 10px 0; border: 0; border-top: 1px solid var(--line, rgba(31, 29, 26, .08)); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lg-premio .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--surf2, #F4F1EB); border: 2px solid var(--acc); display: grid; place-items: center; flex: none; overflow: hidden; }
.lg-premio .ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-premio .ic .lg-trazo { width: 22px; height: 22px; stroke-width: 1.7; }
.lg-premio .txt { flex: 1; min-width: 0; }
.lg-premio .txt b { display: block; font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-premio .txt small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-premio .txt small i { font-style: normal; color: var(--acc); font-weight: 500; }
.lg-premio .quedan { text-align: right; flex: none; }
.lg-premio .quedan b { display: block; font-weight: 500; font-size: 15px; }
.lg-premio .quedan small { font-size: 12px; color: var(--muted); }
.lg-premio.agotado { opacity: .5; }
.lg-premio.agotado .ic { border-color: var(--muted2, #A19C94); filter: grayscale(1); }
.lg-premio.tomado .ic { border-color: var(--lg-oro); }
.lg-premio.tomado .quedan small { color: var(--lg-oro-osc); font-weight: 500; }
.lg-vacio { padding: 18px 4px; text-align: center; font-size: 14px; color: var(--muted); }

/* ── "Estás en…": la pastilla cuando estás a menos de 60 m (misma forma que la de los monumentos) ── */
.lg-aqui { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 70px); z-index: 1300; max-width: min(92vw, 420px);
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 28px; background: var(--ink); color: var(--surf, #fff); box-shadow: 0 10px 28px rgba(31, 29, 26, .25); }
.lg-aqui[hidden] { display: none; }
.lg-aqui.debajo { top: calc(env(safe-area-inset-top, 0px) + 70px + 58px); }   /* con la pastilla de un monumento a la vista (la Plaza 14 tiene las dos) */
.lg-aqui .ico { width: 34px; height: 34px; border-radius: 50%; background: var(--lg-oro); color: #fff; display: grid; place-items: center; flex: none; }
.lg-aqui .ico .lg-trazo { width: 20px; height: 20px; }
.lg-aqui .tx { min-width: 0; line-height: 1.2; }
.lg-aqui .tx b { display: block; font-size: 13px; font-weight: 500; }
.lg-aqui .tx small { display: block; font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-aqui .lg-btn { min-height: 34px; padding: 0 14px; font-size: 13px; white-space: nowrap; flex: none; }
.lg-aqui .lg-x { width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; background: none; color: inherit; opacity: .8; display: grid; place-items: center; cursor: pointer; }
.lg-aqui .lg-x .lg-trazo { width: 18px; height: 18px; }

/* ── La tarjeta del lugar (pantalla 3) ── */
.lg-tarjeta h3.lg-nombre { margin: 0; font-size: 20px; font-weight: 400; letter-spacing: -.01em; }
.lg-tarjeta .lg-k { margin: 0 0 2px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--lg-oro-osc); }
.lg-visor { position: relative; margin: 10px 0 4px; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 90% at 50% 70%, #F3E9CC 0%, var(--surf2, #F4F1EB) 70%); }
.lg-visor model-viewer { display: block; width: 100%; height: 280px; --poster-color: transparent; --progress-bar-color: var(--lg-oro); --progress-bar-height: 2px; }
.lg-visor .lg-ar { position: absolute; right: 10px; bottom: 10px; min-height: 40px; padding: 0 14px; font-size: 13px; background: var(--surf, #fff); color: var(--lg-oro-osc) !important; border: 1.5px solid var(--lg-oro); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; font-family: inherit; }
.lg-visor .lg-ar .lg-trazo { width: 16px; height: 16px; }
.lg-visor .lg-premio-ar { position: absolute; right: 14px; top: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--surf, #fff); border: 3px solid var(--acc); display: grid; place-items: center; overflow: hidden; box-shadow: 0 10px 24px rgba(31, 29, 26, .25); animation: lg-flota 3s ease-in-out infinite; pointer-events: none; }
.lg-premio-ar[hidden] { display: none !important; }
.lg-visor .lg-premio-ar img { width: 100%; height: 100%; object-fit: cover; }
.lg-visor .lg-premio-ar .lg-trazo { width: 28px; height: 28px; stroke-width: 1.6; }
@keyframes lg-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .lg-visor .lg-premio-ar { animation: none; } }
.lg-visor .lg-sin { padding: 28px 16px; text-align: center; font-size: 14px; color: var(--muted); }
.lg-visor .lg-sin img { display: block; width: 120px; height: 120px; border-radius: 24px; object-fit: cover; margin: 0 auto 10px; border: 3px solid var(--lg-oro); background: var(--lg-oro-bg); }
.lg-visor .lg-sin .lg-trazo { width: 44px; height: 44px; color: var(--lg-oro-osc); margin: 0 auto 8px; display: block; }
.lg-cargando { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--muted); pointer-events: none; }
.lg-nota { margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.lg-elegido h4 { margin: 12px 0 0; font-size: 18px; font-weight: 500; line-height: 1.2; }
.lg-elegido p { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.lg-elegir { display: flex; gap: 10px; margin: 12px 0 4px; padding: 5px 5px 7px; overflow-x: auto; }
.lg-op { width: 44px; height: 44px; border-radius: 50%; background: var(--surf2, #F4F1EB); border: 2px solid var(--line, rgba(31, 29, 26, .08)); display: grid; place-items: center; flex: none; color: var(--ink); position: relative; cursor: pointer; padding: 0; overflow: hidden; font: inherit; }
.lg-op img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.lg-op.on { border-color: var(--acc); background: var(--lg-acc-suave); overflow: visible; }
.lg-op.on::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--acc); pointer-events: none; }
.lg-op .lg-trazo { width: 22px; height: 22px; }
.lg-op.agotado { opacity: .4; }

/* ── El vale (pantalla 4) ── */
.lg-vale { text-align: center; padding-top: 44px; }
.lg-vale .fig { width: 84px; height: 84px; border-radius: 50%; margin: -58px auto 10px; background: var(--lg-oro-bg); border: 4px solid var(--lg-oro); box-shadow: 0 10px 24px rgba(31, 29, 26, .25); overflow: hidden; display: grid; place-items: center; color: var(--lg-oro-osc); position: relative; }
.lg-vale .fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-vale .fig .lg-trazo { width: 40px; height: 40px; stroke-width: 1.5; }
.lg-vale h3 { margin: 0; font-size: 20px; font-weight: 500; }
.lg-vale .pr-grande { width: 72px; height: 72px; border-radius: 50%; background: var(--lg-acc-suave); border: 3px solid var(--acc); display: grid; place-items: center; margin: 14px auto 8px; color: var(--ink); overflow: hidden; }
.lg-vale .pr-grande img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-vale .pr-grande .lg-trazo { width: 34px; height: 34px; stroke-width: 1.5; }
.lg-vale .que { font-size: 17px; font-weight: 500; }
.lg-vale .donde { font-size: 14px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.lg-vale .donde b { color: var(--ink); font-weight: 500; }
.lg-vale .codigo { margin: 14px auto 0; display: inline-flex; gap: 10px; align-items: center; background: var(--field, #F4F1EB); border-radius: 14px; padding: 8px 12px; font-size: 13px; }
.lg-vale .codigo b { font-weight: 500; font-size: 18px; letter-spacing: .08em; }
.lg-vale .codigo .lg-trazo { width: 20px; height: 20px; }
.lg-vale .fila-sec { display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.lg-vale .lg-acciones { margin-top: 16px; }
.lg-vale .ayuda { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.4; }