/* La Grúa Gigante — base: colores y letras de obra, marco de teléfono en computadora, placas atornilladas (botones),
   pernos (botones redondos), el display de la cabina (contador), la portada con cinta de precaución, la pista y las
   ayudas (manita, "Que la grúa lo coloque"), los sellos, las tarjetas (planos de cianotipia, letreros metálicos y el
   aviso amarillo), el "¡cumple!" y el resumen final. Todo cuelga de html.lg. Por dentro se mide contra el marco (.app
   es un contenedor de tamaño: cqw/cqh), nunca contra la ventana. */
.lg {
  --negro: #1B1D22; --negro-2: #2C2F36; --amarillo: #FFC400; --amarillo-d: #D9A300; --amarillo-l: #FFE27A;
  --naranja: #FF6A13; --rojo: #C8321E; --papel: #FFF8E6;
  --azul: #1D4F91; --azul-d: #123866; --azul-l: #2D68B8;
  --acero-l: #EEF0F2; --acero: #CDD2D7; --acero-d: #8E969E; --wa: #25D366;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --f-letrero: "Saira Stencil One", "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-cond: "Barlow Condensed", "Barlow", "Arial Narrow", system-ui, sans-serif;
  --f-texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tornillo: radial-gradient(circle at 40% 35%, #F7F8F9 0 1.4px, #9AA1A8 1.6px 3.2px, #50565D 3.4px 4.2px, transparent 4.6px);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.lg *, .lg *::before, .lg *::after { box-sizing: border-box; }
.lg body { margin: 0; font-family: var(--f-texto); color: var(--negro); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.lg button { font: inherit; color: inherit; }
.lg :focus-visible { outline: 3px solid var(--negro); outline-offset: 3px; box-shadow: 0 0 0 6px var(--amarillo); }
.lg .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lg .noscript { margin: 24px; font: 700 18px/1.5 var(--f-texto); background: var(--papel); padding: 16px; border: 3px solid var(--negro); }

/* ---------- marco ---------- */
.lg .fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background:
  repeating-linear-gradient(-45deg, rgba(27, 29, 34, .9) 0 34px, rgba(255, 196, 0, .9) 34px 68px) 0 100% / 100% 54px no-repeat,
  linear-gradient(180deg, #2C74C9 0%, #9CCAF0 42%, #FFD7A2 66%, #B88E62 66.4%, #9C7550 100%); }
.lg:not(.is-showcase) .fondo { filter: blur(5px) saturate(1.05); }
.lg.is-showcase .fondo { display: none; }
.lg .app { position: fixed; inset: 0; z-index: 1; overflow: hidden; isolation: isolate; container-type: size; container-name: marco; background: #F3D3AE; transition: opacity .5s ease; }
/* computadora y tableta: el mismo marco de teléfono que los demás diseños, con la obra difuminada alrededor */
@media (min-width: 560px) and (min-height: 560px) {
  .lg .app { inset: auto; left: 50%; top: 50%; width: min(430px, 100vw - 32px); height: min(932px, 100dvh - 40px); transform: translate(-50%, -50%); border-radius: 34px;
    box-shadow: 0 0 0 4px var(--negro), 0 0 0 9px var(--amarillo), 0 0 0 12px var(--negro), 0 30px 90px rgba(0, 0, 0, .5); }
}
.lg.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.lg .stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; }
.lg .stage:focus-visible { box-shadow: inset 0 0 0 4px var(--amarillo), inset 0 0 0 7px var(--negro); }
.lg .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.lg .gl.is-on { opacity: 1; }
/* viñeta cálida (como el postproceso de una película, sin costo de GPU) */
.lg .vineta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 95% at 50% 42%, rgba(0, 0, 0, 0) 56%, rgba(46, 24, 4, .3) 100%), linear-gradient(180deg, rgba(255, 200, 120, .08), rgba(0, 0, 0, 0) 30%); }
.lg [data-fase="final"] .vineta, .lg [data-fase="celebra"] .vineta { background: radial-gradient(130% 95% at 50% 42%, rgba(0, 0, 0, 0) 50%, rgba(10, 6, 30, .42) 100%); }
.lg .sin-gl .stage { background: url("../assets/poster/fondo-grua.webp") center / cover no-repeat, linear-gradient(180deg, #2C74C9 0%, #9CCAF0 46%, #FFD7A2 64%, #B88E62 64.2%); }
.lg .ui { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.lg .ui > * { pointer-events: auto; }

/* ---------- placas atornilladas (botones) ---------- */
.lg .placa {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px;
  border: 3px solid var(--negro); border-radius: 6px; color: var(--negro); text-decoration: none; cursor: pointer;
  font: 800 16px/1.12 var(--f-cond); letter-spacing: .03em; text-transform: uppercase; text-align: center;
  background: var(--tornillo) 3px 3px / 10px 10px no-repeat, var(--tornillo) calc(100% - 3px) 3px / 10px 10px no-repeat,
    var(--tornillo) 3px calc(100% - 3px) / 10px 10px no-repeat, var(--tornillo) calc(100% - 3px) calc(100% - 3px) / 10px 10px no-repeat,
    linear-gradient(180deg, #F6F7F8 0%, var(--acero) 55%, #B4BAC1 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), inset 0 -3px 0 rgba(0, 0, 0, .12), 0 4px 0 var(--negro);
  transition: transform .1s ease, box-shadow .1s ease; touch-action: manipulation; user-select: none;
}
.lg .placa:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 1px 0 var(--negro); }
.lg .placa.is-oro { background-color: var(--amarillo); background-image: var(--tornillo), var(--tornillo), var(--tornillo), var(--tornillo), linear-gradient(180deg, #FFE27A 0%, var(--amarillo) 48%, #F0B400 100%); }
.lg .placa.is-acero { background-image: var(--tornillo), var(--tornillo), var(--tornillo), var(--tornillo), linear-gradient(180deg, #FBFCFC 0%, #DCE0E4 55%, #C2C8CE 100%); }
.lg .placa.is-wa { background-image: var(--tornillo), var(--tornillo), var(--tornillo), var(--tornillo), linear-gradient(180deg, #5BE38E 0%, var(--wa) 60%, #1EB458 100%); color: #06301A; }
.lg .placa.is-chica { min-height: 44px; padding: 0 16px; font-size: 15px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 3px 0 var(--negro); }
.lg .placa.is-grande { min-height: 58px; font-size: 19px; }
.lg .placa.is-bloque { width: 100%; }
.lg .placa .pi { display: inline-flex; }
/* pernos: botones redondos como cabeza de tornillo */
.lg .perno { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 3px solid var(--negro); border-radius: 50%; cursor: pointer; color: var(--negro);
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #E3E6E9 35%, #AEB5BC 100%); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 3px 0 var(--negro); }
.lg .perno:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--negro); }
.lg .enlace { border: 0; background: none; padding: 10px 8px; min-height: 44px; font: 800 16px var(--f-cond); letter-spacing: .02em; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }

/* ---------- HUD: sonido, display de la cabina, datos ---------- */
.lg .hud { position: absolute; z-index: 25; left: 10px; right: 10px; top: calc(var(--safe-t) + 10px); display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.lg .hud > * { pointer-events: auto; }
.lg .display { margin: 0; display: inline-flex; align-items: baseline; gap: 10px; padding: 6px 16px 7px; border: 3px solid var(--negro); border-radius: 8px;
  background: linear-gradient(180deg, #13241A, #0B1610); color: #FFB61E; box-shadow: inset 0 0 0 3px #3B4048, inset 0 0 14px rgba(255, 182, 30, .16), 0 4px 0 var(--negro);
  font: 800 15px/1 var(--f-cond); letter-spacing: .18em; text-shadow: 0 0 6px rgba(255, 182, 30, .55); }
.lg .display-n { font-size: 26px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.lg .display.is-pop { animation: lg-pop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes lg-pop { 40% { transform: scale(1.18); } }
.lg .hud.is-portada .display, .lg [data-fase="celebra"] .display, .lg [data-fase="final"] .display { visibility: hidden; }
.lg .tj-t:focus-visible { outline: none; box-shadow: none; }
.lg [data-fase="celebra"] .hud-datos { visibility: hidden; }

/* ---------- PORTADA ---------- */
.lg .portada { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--safe-t) + 78px) 16px calc(var(--safe-b) + 14px); text-align: center; pointer-events: none; transition: opacity .45s ease; }
.lg .portada > * { pointer-events: auto; }
.lg .portada.is-out { opacity: 0; pointer-events: none; }
.lg .portada-cinta { position: absolute; left: -12%; right: -12%; top: calc(var(--safe-t) + 92px); height: 30px; transform: rotate(-3.5deg); overflow: hidden; pointer-events: none !important;
  background: repeating-linear-gradient(-45deg, var(--negro) 0 18px, var(--amarillo) 18px 36px); border-block: 3px solid var(--negro); box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.lg .portada-cinta span { position: absolute; top: 3px; bottom: 3px; left: 50%; display: flex; align-items: center; width: max-content; padding: 0 12px; transform: translateX(-50%); white-space: nowrap; background: var(--amarillo); font: 800 12px/1 var(--f-cond); letter-spacing: .2em; color: var(--negro); }
.lg .portada-aviso { position: relative; margin-top: 22px; width: min(100%, 320px); padding: 30px 14px 12px; border: 4px solid var(--negro); border-radius: 10px;
  background: var(--tornillo) 5px 5px / 12px 12px no-repeat, var(--tornillo) calc(100% - 5px) 5px / 12px 12px no-repeat, var(--tornillo) 5px calc(100% - 5px) / 12px 12px no-repeat, var(--tornillo) calc(100% - 5px) calc(100% - 5px) / 12px 12px no-repeat,
    linear-gradient(180deg, #FFD54A, var(--amarillo) 60%, #F2B400);
  box-shadow: inset 0 0 0 4px var(--amarillo), inset 0 0 0 7px var(--negro), 0 7px 0 var(--negro); animation: lg-cuelga .7s .2s cubic-bezier(.3, 1.45, .55, 1) both; transform-origin: 50% -40px; }
@keyframes lg-cuelga { from { opacity: 0; transform: translateY(-40px) rotate(-6deg); } 60% { transform: rotate(2deg); } }
.lg .portada-k { position: absolute; left: 50%; top: 0; margin: 0; transform: translate(-50%, -50%); }
.lg .portada-k svg { display: block; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
.lg .portada-t { margin: 0; display: flex; flex-direction: column; gap: 2px; font: 400 clamp(24px, 7.8cqw, 33px)/1.02 var(--f-letrero); letter-spacing: .01em; color: var(--negro); text-transform: uppercase; }
.lg .portada-t span:first-child { font-size: .72em; }
.lg .portada-sub { margin: 8px 0 0; font: 700 clamp(14.5px, 3.9cqw, 16px)/1.3 var(--f-texto); color: var(--negro); }
.lg .portada-acciones { display: flex; flex-direction: column; align-items: center; gap: 2px; width: min(100%, 360px); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 0, .55); }
.lg .portada-acciones .placa { width: 100%; text-shadow: none; }
.lg .is-operar { animation: lg-late 1.8s 1.2s ease-in-out infinite; }
@keyframes lg-late { 50% { transform: translateY(-3px); } }

/* ---------- operar: pista, botón de ayuda y manita ---------- */
.lg .abajo { position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 14px); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.lg .abajo > * { pointer-events: auto; }
.lg .pista { display: flex; align-items: center; gap: 10px; max-width: 100%; margin: 0; padding: 9px 14px; border: 3px solid var(--negro); border-radius: 6px; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; pointer-events: none !important;
  background: linear-gradient(180deg, #FDFDFD, var(--acero-l) 60%, #D9DDE1); box-shadow: 0 4px 0 var(--negro); font: 800 15px/1.25 var(--f-cond); letter-spacing: .02em; color: var(--negro); }
.lg .pista.is-on { opacity: 1; transform: none; }
/* pulso de la pista: un aro amarillo que aparece y se va (opacidad en su propia capa: no repinta la pista) */
.lg .pista { position: relative; }
.lg .pista::after { content: ""; position: absolute; inset: -9px; border: 6px solid rgba(255, 196, 0, .75); border-radius: 10px; opacity: 0; pointer-events: none; will-change: opacity; }
.lg .pista.is-pulso::after { animation: lg-pulso 1.4s ease-in-out infinite; }
@keyframes lg-pulso { 50% { opacity: 1; } }
.lg .pista-ic { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--amarillo); border: 2px solid var(--negro); }
.lg .solo { min-height: 46px; padding: 0 16px; font-size: 15px; }
.lg .solo[hidden] { display: none; }
.lg .con-tarjeta .abajo { visibility: hidden; }
.lg .manita { position: absolute; inset: 0; pointer-events: none !important; opacity: 0; transition: opacity .35s; }
.lg .manita.is-on { opacity: 1; }
.lg .manita-dedo { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 64px; height: 64px; margin: -10px 0 0 -18px; border-radius: 50%; color: var(--negro);
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 46%, rgba(255, 255, 255, 0) 70%); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); }
.lg .manita.is-on .manita-dedo { animation: lg-gesto 2.6s ease-in-out infinite; }
@keyframes lg-gesto {
  0% { transform: translate(var(--x0), var(--y0)) scale(1); opacity: 0; }
  12% { transform: translate(var(--x0), var(--y0)) scale(.86); opacity: 1; }
  62% { transform: translate(var(--x1), var(--y1)) scale(.86); opacity: 1; }
  74% { transform: translate(var(--x1), calc(var(--y1) - 14px)) scale(1.05); opacity: 1; }
  100% { transform: translate(var(--x1), calc(var(--y1) - 14px)) scale(1.05); opacity: 0; }
}
.lg .rm .manita.is-on .manita-dedo, .lg.rm .manita.is-on .manita-dedo { animation: none; transform: translate(var(--x1), var(--y1)); opacity: 1; }

/* ---------- sellos ("¡Justo en el blanco!") ---------- */
.lg .sello { position: absolute; left: 50%; top: 31cqh; z-index: 40; margin: 0; max-width: 86cqw; padding: 8px 18px 6px; transform: translate(-50%, -50%) rotate(-6deg); pointer-events: none !important; text-align: center;
  font: 400 clamp(24px, 8cqw, 34px)/1.05 var(--f-letrero); text-transform: uppercase; border: 4px solid currentColor; border-radius: 8px; outline: 2px solid currentColor; outline-offset: 3px;
  animation: lg-sello .42s cubic-bezier(.2, 1.6, .5, 1) both; }
.lg .sello.is-oro { color: var(--negro); background: rgba(255, 196, 0, .94); box-shadow: 0 0 0 8px rgba(255, 196, 0, .35); }
.lg .sello.is-acero { color: var(--negro); background: rgba(238, 240, 242, .96); font-size: clamp(20px, 6.4cqw, 26px); }
.lg .sello.is-out { opacity: 0; transition: opacity .35s; }
@keyframes lg-sello { from { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(1.8); } }

/* ---------- tarjetas ---------- */
.lg .tarjeta { position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 12px); z-index: 30; max-height: calc(100cqh - var(--safe-t) - 86px); overflow: auto; padding: 18px 18px 16px; border: 3px solid var(--negro); border-radius: 8px;
  transform: translateY(24px) rotate(-1deg); opacity: 0; transition: transform .38s cubic-bezier(.3, 1.4, .5, 1), opacity .25s; scrollbar-width: thin; }
.lg .tarjeta.is-in { transform: none; opacity: 1; }
.lg .tarjeta.is-out { transform: translateY(40px); opacity: 0; }
.lg .tj-k { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 800 14px/1.2 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; }
.lg .tj-t { margin: 0 0 12px; font: 400 clamp(25px, 7.6cqw, 32px)/1.04 var(--f-letrero); outline: none; }
.lg .tj-cuerpo { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.lg .tj-seguir { position: relative; overflow: hidden; }
.lg .tj-avance { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: var(--negro); transform-origin: left; transform: scaleX(0); opacity: .55; will-change: transform; }
.lg .tarjeta.is-auto .tj-avance { animation: lg-avance var(--auto, 11s) linear forwards; }
@keyframes lg-avance { to { transform: scaleX(1); } }
.lg .tj-seguir > span:not(.tj-avance) { position: relative; }
/* plano de cianotipia: azul con cuadrícula y trazo blanco, rótulo abajo */
.lg .tarjeta.is-plano { color: #fff; border-color: var(--azul-d);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 16px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 16px), radial-gradient(120% 90% at 30% 0%, var(--azul-l), var(--azul) 55%, var(--azul-d));
  box-shadow: inset 0 0 0 6px var(--azul), inset 0 0 0 8px rgba(255, 255, 255, .75), 0 6px 0 var(--negro), 0 18px 40px rgba(0, 0, 0, .35); }
.lg .tarjeta.is-plano .tj-t { color: #fff; }
.lg .tj-grapas { position: absolute; left: 50%; top: 6px; width: 70px; height: 10px; transform: translateX(-50%); background: linear-gradient(90deg, #AEB5BC 0 14px, transparent 14px 56px, #AEB5BC 56px); border-radius: 2px; opacity: .9; }
.lg .tj-rotulo { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0 0; padding-top: 8px; border-top: 2px solid rgba(255, 255, 255, .75); font: 700 12px/1.2 var(--f-cond); letter-spacing: .12em; }
/* letrero metálico: lámina galvanizada con remaches y franja de precaución */
.lg .tarjeta.is-metal { color: var(--negro); padding-top: 30px;
  background: repeating-linear-gradient(-45deg, var(--negro) 0 12px, var(--amarillo) 12px 24px) 0 0 / 100% 14px no-repeat,
    linear-gradient(115deg, rgba(255, 255, 255, .5) 0 18%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .25) 48%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #F2F4F5, var(--acero) 60%, #BBC1C7);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 6px 0 var(--negro), 0 18px 40px rgba(0, 0, 0, .35); }
.lg .tj-remaches { position: absolute; inset: 22px 8px 8px; pointer-events: none; background: var(--tornillo) 0 0 / 10px 10px no-repeat, var(--tornillo) 100% 0 / 10px 10px no-repeat, var(--tornillo) 0 100% / 10px 10px no-repeat, var(--tornillo) 100% 100% / 10px 10px no-repeat; }
/* aviso amarillo (el pastel: nombre y edad) */
.lg .tarjeta.is-aviso { color: var(--negro); text-align: center; background: linear-gradient(180deg, #FFD54A, var(--amarillo) 60%, #F2B400); box-shadow: inset 0 0 0 5px var(--amarillo), inset 0 0 0 8px var(--negro), 0 6px 0 var(--negro), 0 18px 40px rgba(0, 0, 0, .35); padding: 22px 22px 18px; }
.lg .tarjeta.is-aviso .tj-k { justify-content: center; }
.lg .tarjeta.is-aviso .tj-t { font-size: clamp(32px, 10.5cqw, 44px); text-transform: uppercase; }
.lg .cumple-sub { margin: 0; font: 800 clamp(18px, 5.4cqw, 22px)/1.2 var(--f-cond); letter-spacing: .02em; }
.lg .cumple-nota { margin: 0; font: 600 16px/1.35 var(--f-texto); }
/* piezas de las tarjetas */
.lg .cota { position: relative; margin: 0; padding: 10px 14px 12px; border: 2px dashed currentColor; border-radius: 4px; text-align: center; }
.lg .cota p { margin: 0; }
.lg .cota-k { font: 800 15px/1.2 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; }
.lg .cota-v { font: 400 clamp(32px, 10.5cqw, 44px)/1.05 var(--f-letrero); }
.lg .cota-s { font: 700 15px/1.25 var(--f-texto); }
.lg .etiqueta { align-self: flex-start; margin: 0; padding: 6px 12px; border: 2px solid var(--negro); border-radius: 4px; background: var(--amarillo); color: var(--negro); font: 800 16px/1.1 var(--f-cond); letter-spacing: .04em; transform: rotate(-1.5deg); }
.lg .acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.lg .acciones > * { flex: 1 1 140px; }
.lg .itinerario { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lg .itinerario li { display: flex; gap: 12px; align-items: baseline; padding: 6px 10px; border-left: 5px solid var(--amarillo-d); background: rgba(255, 255, 255, .45); border-radius: 2px; }
.lg .it-hora { flex: none; min-width: 66px; font: 800 16px var(--f-cond); }
.lg .it-que { font: 600 16px/1.3 var(--f-texto); }
.lg .croquis { border: 2px solid rgba(255, 255, 255, .85); border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, .12); }
.lg .croquis svg { display: block; width: 100%; height: auto; }
.lg .lugar-nombre { margin: 0; font: 400 24px/1.1 var(--f-letrero); }
.lg .lugar-dir { margin: -6px 0 0; font: 600 16px/1.4 var(--f-texto); }
.lg .mensaje { margin: 0; padding: 14px 16px; border: 2px solid var(--negro); border-radius: 4px; background: var(--papel); }
.lg .mensaje p { margin: 0; font: 700 clamp(18px, 5.4cqw, 21px)/1.35 var(--f-texto); }
.lg .mensaje footer { margin-top: 8px; font: 800 16px var(--f-cond); letter-spacing: .06em; text-align: right; }

/* ---------- ¡cumple! y final ---------- */
.lg .saltar { position: absolute; right: 12px; bottom: calc(var(--safe-b) + 16px); z-index: 35; }
.lg .cumple { position: absolute; left: 12px; right: 12px; top: 16cqh; z-index: 32; text-align: center; pointer-events: none !important; transition: top .6s ease, transform .6s ease; }
/* el ¡cumple! es un letrero de obra que se cuelga: amarillo, franjas de precaución arriba, tornillos y letras negras */
.lg .cumple-letrero { position: relative; display: inline-block; max-width: 100%; padding: 26px 18px 14px; border: 4px solid var(--negro); border-radius: 10px;
  background: repeating-linear-gradient(-45deg, var(--negro) 0 12px, var(--amarillo) 12px 24px) 0 0 / 100% 14px no-repeat, var(--tornillo) 6px 20px / 12px 12px no-repeat, var(--tornillo) calc(100% - 6px) 20px / 12px 12px no-repeat, var(--tornillo) 6px calc(100% - 6px) / 12px 12px no-repeat, var(--tornillo) calc(100% - 6px) calc(100% - 6px) / 12px 12px no-repeat, linear-gradient(180deg, #FFD54A, var(--amarillo) 60%, #F2B400);
  box-shadow: 0 7px 0 var(--negro), 0 18px 40px rgba(0, 0, 0, .45); animation: lg-cuelga .7s .1s cubic-bezier(.3, 1.45, .55, 1) both; transform-origin: 50% -60px; }
.lg .cumple-k { margin: 0 0 6px; font: 800 14px/1.15 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--negro); }
.lg .cumple-t { margin: 0; font: 400 clamp(38px, 12cqw, 54px)/.98 var(--f-letrero); color: var(--negro); text-transform: uppercase; }
.lg .cumple-s { margin: 10px auto 0; display: inline-block; padding: 5px 14px; border-radius: 4px; background: var(--negro); color: var(--amarillo); font: 800 18px/1.2 var(--f-cond); letter-spacing: .03em; }
.lg .cumple.is-arriba { top: calc(var(--safe-t) + 66px); transform: scale(.66); transform-origin: 50% 0; }
.lg .cumple.is-arriba .cumple-k, .lg .cumple.is-arriba .cumple-s { display: none; }
.lg .fin { position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 12px); z-index: 30; display: flex; flex-direction: column; gap: 10px; max-height: calc(100cqh - var(--safe-t) - 160px); overflow: auto; padding: 22px 16px 10px; border: 3px solid var(--negro); border-radius: 8px;
  background: repeating-linear-gradient(-45deg, var(--negro) 0 12px, var(--amarillo) 12px 24px) 0 0 / 100% 12px no-repeat, linear-gradient(180deg, #F2F4F5, var(--acero) 60%, #BBC1C7);
  box-shadow: 0 6px 0 var(--negro), 0 18px 40px rgba(0, 0, 0, .35); animation: lg-sube .5s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes lg-sube { from { opacity: 0; transform: translateY(30px); } }
.lg .fin-remaches { position: absolute; inset: 18px 7px 7px; pointer-events: none; background: var(--tornillo) 0 0 / 10px 10px no-repeat, var(--tornillo) 100% 0 / 10px 10px no-repeat, var(--tornillo) 0 100% / 10px 10px no-repeat, var(--tornillo) 100% 100% / 10px 10px no-repeat; }
.lg .fin-k { margin: 0; font: 800 14px/1.2 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.lg .fin-t { margin: -4px 0 0; font: 400 clamp(26px, 8cqw, 32px)/1.05 var(--f-letrero); text-align: center; text-transform: uppercase; }
.lg .fin-linea { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font: 800 18px/1.25 var(--f-cond); }
.lg .fin-lugar { border: 2px solid var(--negro); border-radius: 4px; background: var(--azul); color: #fff; }
.lg .fin-lugar summary { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 12px; cursor: pointer; font: 800 17px var(--f-cond); list-style: none; }
.lg .fin-lugar summary::-webkit-details-marker { display: none; }
.lg .fin-salon { flex: 1; }
.lg .fin-vermapa { font: 700 14px var(--f-cond); text-decoration: underline; text-underline-offset: 3px; }
.lg .fin-lugar[open] { padding-bottom: 12px; }
.lg .fin-lugar > :not(summary) { margin: 8px 12px 0; }
.lg .fin-lugar .acciones .placa { color: var(--negro); }
.lg .fin-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; }
.lg [data-fase="final"] .cumple-t { font-size: clamp(36px, 12cqw, 50px); }

/* ---------- vitrina y diagnóstico ---------- */
.lg .is-vitrina .ui > :not(.vitrina-t) { display: none; }
.lg .vitrina-t { position: absolute; left: 0; right: 0; top: 7%; margin: 0; text-align: center; pointer-events: none; }
.lg .vitrina-t span { display: inline-block; padding: 6px 18px; border: 4px solid var(--negro); border-radius: 8px; background: var(--amarillo); font: 400 clamp(26px, 5cqw, 52px)/1 var(--f-letrero); box-shadow: 0 6px 0 var(--negro); }
.lg .vitrina-t small { display: block; margin-top: 12px; font: 800 clamp(16px, 2.4cqw, 26px)/1 var(--f-cond); color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.lg .dbg-fps { position: absolute; left: 8px; bottom: calc(var(--safe-b) + 6px); margin: 0; padding: 2px 8px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font: 11px ui-monospace, monospace; z-index: 80; pointer-events: none; }

/* ---------- movimiento reducido ---------- */
.lg.rm .portada-aviso, .lg.rm .is-operar, .lg.rm .display.is-pop, .lg.rm .sello, .lg.rm .cumple-t, .lg.rm .cumple-k, .lg.rm .cumple-s, .lg.rm .fin, .lg.rm .pista.is-pulso { animation: none !important; }
.lg.rm .tarjeta { transition: opacity .2s; transform: none; }
@media (prefers-reduced-motion: reduce) { .lg .portada-aviso, .lg .is-operar, .lg .sello, .lg .cumple-t, .lg .cumple-k, .lg .cumple-s, .lg .fin, .lg .pista.is-pulso, .lg .display.is-pop { animation: none !important; } .lg .tarjeta { transition: opacity .2s; transform: none; } }