/* visor.css — la carta pública de cada local y las páginas de mensaje */
html, body { margin: 0; height: 100%; background: #060506; }
body.visor { min-height: 100dvh; display: grid; place-items: center; overflow: hidden; }
.visor-bg { position: fixed; inset: -60px; background: #0B0A09 var(--fondo) center / cover no-repeat; filter: blur(46px) brightness(.32) saturate(1.2); transform: scale(1.1); }
#carta { position: relative; width: min(480px, 100%); height: 100dvh; }
@media (min-width: 620px) {
  #carta { height: min(calc(100dvh - 48px), 940px); border-radius: 34px; box-shadow: 0 40px 120px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08); }
}
.visor-plano { padding: 24px; color: #EEE8DF; font-family: 'Geist', system-ui, sans-serif; line-height: 1.5; }
.visor-plano h2 { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 500; }
.visor-plano ul { padding-left: 18px; }

body.mensaje { display: grid; place-items: center; min-height: 100dvh; padding-inline: 20px; color: #F2EEE8; font-family: 'Geist', system-ui, sans-serif; background: radial-gradient(circle at 30% 20%, #3A1426, #070608 60%); }
.mensaje main { max-width: 30em; display: grid; gap: 14px; }
.mensaje .k { margin: 0; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #D9B77A; }
.mensaje h1 { margin: 0; font-family: 'Unbounded', system-ui, sans-serif; font-weight: 300; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; letter-spacing: -.03em; }
.mensaje p { margin: 0; color: #B6AEA4; }
.mensaje a { justify-self: start; margin-top: 8px; padding: 12px 22px; border-radius: 99px; color: #1A1208; font-weight: 600; text-decoration: none; background: linear-gradient(135deg, #F6E4BC, #D9B77A 45%, #9A7843); }

/* franja de la vista previa (carta en prueba): una tira fina arriba; la carta baja lo justo */
.vv-franja { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: calc(34px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 12px/1 'Geist', system-ui, sans-serif; letter-spacing: .02em; color: #EDE6DA; background: rgba(12, 10, 9, .86); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); white-space: nowrap; }
.vv-franja i { width: 6px; height: 6px; border-radius: 50%; background: #E9C46A; box-shadow: 0 0 0 4px rgba(233,196,106,.16); flex: none; }
.vv-franja span { overflow: hidden; text-overflow: ellipsis; }
.vv-franja b { font-weight: 600; }
.vv-franja a { flex: none; padding: 5px 11px; border-radius: 99px; color: #EDE6DA; text-decoration: none; border: 1px solid rgba(255,255,255,.18); font-weight: 500; font-size: 11px; }
.vv-franja.duenio a { color: #1A1208; border: 0; font-weight: 600; background: linear-gradient(135deg, #F6E4BC, #D9B77A 45%, #B08A52); }
.vv-franja a:hover { filter: brightness(1.08); }
body.visor.en-prueba #carta { height: calc(100dvh - 34px - env(safe-area-inset-top)); margin-top: calc(34px + env(safe-area-inset-top)); }
@media (min-width: 620px) { body.visor.en-prueba #carta { height: min(calc(100dvh - 34px - 40px), 940px); margin-top: 34px; } }

.mensaje.pausa .pausa-duenio { margin-top: 18px; padding: 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); display: grid; gap: 4px; }
.mensaje.pausa .pausa-duenio p { font-size: 14px; }