/* Modo demo («Probar sin cuenta»; ver js/demo.js) */

/* Pantalla de entrar: el botón para probar */
.demo-entrar { margin-top: 14px; padding-top: 12px; border-top: 2px dashed #EFE7D6; }
.demo-entrar p { margin: 0 0 6px; }
.demo-entrar .nota { margin-top: 6px; font-size: 15px; }

/* Registro desde la demo: lo jugado se guarda */
.registro-demo { background: #DDF5E5; border-radius: 16px; padding: 10px 14px; margin: 8px 0; text-align: left; }
.registro-demo[hidden] { display: none; }
.registro-demo p { margin: 0 0 4px; font-weight: 700; color: #1E6B3A; }

/* Las 2 preguntas */
.demo-hola { display: flex; align-items: center; gap: 12px; background: #FFF6E8; border-radius: 18px; padding: 8px 12px; margin-bottom: 8px; }
.demo-hola img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.demo-hola p { margin: 0; font-weight: 700; font-size: 18px; }
.demo-idioma { margin-top: 10px; }
.demo-cursos .alta-chip { min-width: 72px; font-size: 22px; }

/* Botón fijo y discreto «Crear cuenta» (abajo a la izquierda: no tapa el título, las islas ni los botones) */
.demo-crear {
  position: fixed; z-index: 8; bottom: calc(10px + env(safe-area-inset-bottom)); left: calc(10px + env(safe-area-inset-left));
  padding: 6px 14px; border-radius: 20px; border: 2px solid #fff; background: rgba(46, 158, 106, .92); color: #fff;
  font: inherit; font-weight: 800; font-size: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); cursor: pointer;
}
.demo-crear[hidden] { display: none; }
.demo-crear:active { transform: scale(.95); }
/* En vertical (móvil y tablet), abajo está la frase del guía: el botón sube por encima */
@media (orientation: portrait) { .demo-crear { bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* Avisos de Luxi (candado, «¿Te ha gustado?») */
#demo-capa { z-index: 12; }
.demo-carta { text-align: center; }
.demo-carta-lumi { width: 120px; height: 120px; object-fit: contain; display: block; margin: 0 auto 4px; }
.demo-carta h3 { margin: 0 0 8px; font-size: 24px; }
.demo-carta-texto { font-size: 19px; margin: 0 0 14px; }
.demo-carta-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.demo-carta-botones .btn { margin: 0; width: auto; flex: 1 1 auto; white-space: nowrap; padding-left: 18px; padding-right: 18px; }

/* Islas y mundos con candado */
.demo-bloqueada .isla-flota > :not(.demo-candado-isla) { filter: saturate(.55); }
.demo-candado-mundo { display: block; margin-top: 2px; font-weight: 800; color: #8A5A00; }

/* Panel de ejemplo de la zona de padres */
.demo-ejemplo-aviso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #FFF3C4; border: 2px dashed #D4A017; border-radius: 16px; padding: 10px 14px; font-weight: 700; }
.demo-sello {
  display: inline-block; background: #D4A017; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 10px; padding: 2px 10px;
}
.caja.demo-ejemplo { position: relative; }
.caja.demo-ejemplo > .demo-sello { position: absolute; top: 12px; right: 12px; }
.caja.demo-ejemplo > h2 { padding-right: 96px; }
.panel-tarjetas.demo-ejemplo { opacity: .95; }
/* Submenús de la zona de padres de la demo (31/10/2026): el sello «Ejemplo» arriba a la derecha y el aviso «Con la cuenta» */
.submenu-dentro.demo-ejemplo { position: relative; padding-top: 34px; }
.submenu-dentro.demo-ejemplo > .demo-sello { position: absolute; top: 6px; right: 8px; }
.demo-con-cuenta { display: inline-block; margin: 4px 0 0; padding: 4px 12px; border-radius: 999px; background: #EFEAF7; color: #5B4B8A; font-weight: 700; font-size: .9em; }
.demo-cta { text-align: center; background: #DDF5E5; }
.demo-cta .btn { max-width: 360px; margin: 8px auto; }
.demo-cta .enlace { display: block; margin: 6px auto 0; }