/* Grupo Nórdico — las guías en vivo de la primera vez (public/guias.js). La capa va arriba de los modales (60) y de la ficha
   (41) y abajo de los avisos (#toasts, 90) y de la intro del logo (100). Clases gu-. */
.gu-capa { position: fixed; inset: 0; z-index: 85; }
.gu-velo { position: absolute; inset: 0; background: transparent; }
.gu-capa.centrado .gu-velo { background: rgba(8, 24, 48, .55); }
.gu-luz { position: fixed; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(8, 24, 48, .55); outline: 3px solid rgba(79, 143, 255, .95); outline-offset: 0; transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease; }
.gu-cartel { position: fixed; left: 50%; top: 50%; width: min(360px, calc(100vw - 24px)); max-width: calc(100vw - 24px); box-sizing: border-box; background: #fff; color: var(--tinta, #1b2740); border-radius: 16px; padding: 14px 16px 10px; box-shadow: 0 18px 50px rgba(8, 24, 48, .35); border: 1px solid var(--linea, #e3e9f2); outline: none; animation: gu-entra .18s ease; }
.gu-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gu-n { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--azul, #2459a6); text-transform: uppercase; overflow-wrap: anywhere; }
.gu-omitir { border: 0; background: transparent; color: var(--suave, #6b7a90); font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.gu-omitir:hover { background: var(--hielo, #eef3fa); color: var(--tinta, #1b2740); }
.gu-t { margin: 0 0 6px; font: 800 17px/1.25 var(--fm, Montserrat, system-ui, sans-serif); color: var(--azul-9, #0b2547); overflow-wrap: anywhere; }
.gu-x { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta-2, #34425a); overflow-wrap: anywhere; }
.gu-x b { color: var(--tinta, #1b2740); }
.gu-pie { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.gu-esp { flex: 1; }
.gu-pie .btn[hidden] { display: none; }
.gu-nomas { display: block; margin: 6px auto 0; border: 0; background: transparent; color: var(--suave, #6b7a90); font: inherit; font-size: 11.5px; text-decoration: underline; cursor: pointer; padding: 4px; }
.gu-nomas:hover { color: var(--tinta, #1b2740); }
.gu-cartel button:focus-visible { outline: 2px solid var(--azul, #2459a6); outline-offset: 2px; }
/* Celular: el cartel como una hoja abajo (entera dentro de la pantalla, sin scroll horizontal). */
.gu-capa.hoja .gu-cartel { left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: 48vh; overflow-y: auto; border-radius: 18px; animation: gu-sube .2s ease; }
.gu-capa.hoja.arriba .gu-cartel { top: calc(8px + env(safe-area-inset-top, 0px)) !important; bottom: auto; }
@keyframes gu-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gu-sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gu-luz { transition: none; } .gu-cartel, .gu-capa.hoja .gu-cartel { animation: none; } }