/* OTROMUNDO · pantalla del alumno. Ciudad de noche, letreros de neón.
   Colores en variables: el tema de la temporada podrá cambiarlos sin tocar el código. */
:root {
  --noche: #0E1530;
  --asfalto: #1A2347;
  --asfalto-2: #232E5C;
  --borde: #33407A;
  --texto: #EAF0FF;
  --tenue: #9AA6CF;
  --cian: #00E5FF;          /* la M de OTROMUNDO */
  --farol: #FFC857;         /* monedas, ventanas encendidas */
  --credito: #B58CFF;       /* créditos de clase */
  --bien: #4BE3A0;
  --mal: #FF6B7A;
  --apagado: #4A5275;
  --radio: 14px;
  --letrero: 'Bungee', system-ui, sans-serif;
  --cuerpo: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--noche); color: var(--texto); font: 17px/1.5 var(--cuerpo); -webkit-tap-highlight-color: transparent; }
body { min-height: 100dvh; }
#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--cian); outline-offset: 2px; }
a { color: var(--cian); }
.tenue { color: var(--tenue); margin: 4px 0 16px; }
.ayuda { color: var(--tenue); font-size: 14px; margin: 6px 0 14px; }
.error { color: var(--mal); min-height: 1.5em; margin: 10px 0 0; font-weight: 600; }

/* ---------- letreros ---------- */
.logo { font: 400 clamp(38px, 12vw, 58px)/1 var(--letrero); letter-spacing: .02em; margin: 0 0 8px; color: var(--texto); text-shadow: 0 0 18px rgba(0, 229, 255, .18); }
.m { color: var(--cian); text-shadow: 0 0 12px var(--cian), 0 0 28px rgba(0, 229, 255, .6); }
.lema { color: var(--tenue); margin: 0 0 28px; }
.titulo { font: 400 26px/1.15 var(--letrero); margin: 6px 0 4px; }
h2, h3 { font-weight: 700; }

.vista { padding: 18px 16px 24px; }
.vista.centro { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.caja { width: 100%; max-width: 380px; text-align: left; }
label { display: block; font-weight: 600; margin: 14px 0 6px; }
.campo { width: 100%; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--borde); background: var(--asfalto); font-size: 20px; }
.campo:focus { border-color: var(--cian); outline: none; }

/* ---------- botones ---------- */
.boton { display: block; width: 100%; padding: 15px 18px; border-radius: 14px; border: 0; font-weight: 700; font-size: 18px; margin-top: 18px; min-height: 56px; }
.boton.principal { background: var(--cian); color: #062330; box-shadow: 0 6px 0 #0091A3; }
.boton.principal:active { transform: translateY(3px); box-shadow: 0 3px 0 #0091A3; }
.boton.principal:disabled { opacity: .55; }
.boton.secundario { background: var(--asfalto-2); color: var(--texto); border: 2px solid var(--borde); margin-top: 0; }
.boton.texto { background: none; color: var(--tenue); text-decoration: underline; margin-top: 30px; }
.boton.fijo { position: sticky; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 5; }
.volver { background: none; border: 0; color: var(--cian); padding: 8px 0; font-weight: 600; font-size: 16px; }
.volver::before { content: '‹ '; font-size: 20px; }

/* ---------- barra de arriba ---------- */
#barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); background: rgba(14, 21, 48, .94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--borde); }
.yo { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; flex: 1; min-width: 0; text-align: left; }
.yo-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--asfalto-2); overflow: hidden; flex: none; border: 2px solid var(--borde); }
.yo-avatar svg { width: 100%; height: 100%; display: block; }
.yo-nombre { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saldo { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: var(--asfalto); font-weight: 800; font-variant-numeric: tabular-nums; }
.saldo::before { content: ''; width: 14px; height: 14px; border-radius: 50%; }
.saldo.monedas { color: var(--farol); }
.saldo.monedas::before { background: radial-gradient(circle at 35% 35%, #FFE6A3, var(--farol) 60%, #C98D1B); }
.saldo.creditos { color: var(--credito); }
.saldo.creditos::before { background: var(--credito); border-radius: 3px; transform: rotate(45deg); width: 11px; height: 11px; }
.saldo.sube { animation: sube .6s ease; }
@keyframes sube { 40% { transform: scale(1.25); } }

/* ---------- barra de abajo ---------- */
.menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 560px; margin: 0 auto; background: rgba(14, 21, 48, .97); border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom); }
.menu a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 10px; color: var(--tenue); text-decoration: none; font-size: 13px; font-weight: 600; min-height: 64px; }
.menu a[aria-current="page"] { color: var(--cian); }
.ico { width: 28px; height: 26px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ico-ciudad { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26'%3E%3Cpath d='M1 25V12h6V4h7v8h3V8h5v6h5v11z'/%3E%3C/svg%3E"); }
.ico-mando { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26'%3E%3Cpath d='M14 1l12 7v10l-12 7L2 18V8zm0 6a6 6 0 100 12 6 6 0 000-12z'/%3E%3C/svg%3E"); }
.ico-cuarto { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26'%3E%3Cpath d='M14 1l13 11h-4v13h-6v-8h-6v8H5V12H1z'/%3E%3C/svg%3E"); }
.ico-bitacora { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26'%3E%3Cpath d='M5 1h16l3 3v21H5zm4 7v2h11V8zm0 5v2h11v-2zm0 5v2h7v-2z'/%3E%3C/svg%3E"); }
.punto { position: absolute; top: 8px; right: calc(50% - 22px); width: 10px; height: 10px; border-radius: 50%; background: var(--mal); }

/* ---------- ARIA y llegada ---------- */
.aria { display: flex; gap: 14px; align-items: flex-start; margin: 10px 0 8px; }
.aria-cara { flex: none; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, var(--cian) 0 22%, transparent 23%), radial-gradient(circle, #10324A 0 60%, #0A2236 61%); box-shadow: 0 0 20px rgba(0, 229, 255, .45); animation: respira 3.2s ease-in-out infinite; }
@keyframes respira { 50% { box-shadow: 0 0 34px rgba(0, 229, 255, .8); } }
.aria-dice { margin: 0; padding: 14px 16px; background: var(--asfalto); border: 1px solid var(--borde); border-radius: 4px var(--radio) var(--radio) var(--radio); font-size: 18px; }
.avatar-grande { width: 150px; height: 150px; margin: 6px auto 0; border-radius: 50%; background: var(--asfalto-2); overflow: hidden; border: 3px solid var(--borde); }
.avatar-grande svg { width: 100%; height: 100%; }

/* ---------- ciudad ---------- */
.ciudad { padding: 0 0 24px; }
.cielo { position: relative; width: 100%; aspect-ratio: 16 / 11; background: linear-gradient(#0A1030 0%, #182457 70%, #24306A 100%); overflow: hidden; }
.cielo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cielo .edificio { cursor: pointer; }
.cielo .edificio:focus-visible rect.cuerpo { stroke: var(--cian); stroke-width: 3; }
.cielo .ventana-luz { fill: var(--farol); }
.cielo .ventana-off { fill: #2A3360; }
.cielo .apagado rect.cuerpo { fill: #1C2246; }
.cielo .letrero { font: 400 13px var(--letrero); fill: var(--cian); }
.cielo .apagado .letrero { fill: var(--apagado); }
.descanso .cielo { background: linear-gradient(#050819 0%, #0C1338 75%, #121B47 100%); }
.descanso .cielo .ventana-luz { fill: #8C7438; }
.barrio-nombre { padding: 14px 16px 2px; }
.barrio-nombre h2 { font: 400 22px var(--letrero); margin: 0; }
.lugares { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 16px; }
.lugar { display: flex; flex-direction: column; gap: 4px; padding: 14px; min-height: 104px; border-radius: var(--radio); background: var(--asfalto); border: 2px solid var(--borde); text-align: left; color: var(--texto); text-decoration: none; }
.lugar strong { font-size: 17px; }
.lugar span { color: var(--tenue); font-size: 14px; line-height: 1.35; }
.lugar.abierto { border-color: rgba(0, 229, 255, .55); }
.lugar.cerrado { opacity: .6; border-style: dashed; }
.lugar.ancho { grid-column: 1 / -1; min-height: 0; }

/* ---------- misiones ---------- */
.mision { display: block; width: 100%; text-align: left; padding: 16px; margin: 0 0 12px; border-radius: var(--radio); background: var(--asfalto); border: 2px solid var(--borde); color: var(--texto); }
.mision h3 { margin: 0 0 4px; font-size: 19px; }
.mision p { margin: 0 0 10px; color: var(--tenue); font-size: 15px; }
.mision.lista { border-color: rgba(75, 227, 160, .6); }
.mision.cerrada { opacity: .7; }
.etiqueta { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--asfalto-2); color: var(--tenue); margin-right: 6px; }
.etiqueta.abierta { color: var(--cian); }
.etiqueta.lista { color: var(--bien); }
.avance { height: 10px; border-radius: 999px; background: var(--asfalto-2); overflow: hidden; margin: 8px 0 16px; }
.avance > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--farol), #FFE08A); border-radius: inherit; transition: width .5s ease; }
.mision-sep { font: 400 15px var(--letrero); color: var(--tenue); margin: 22px 0 10px; }
.vacio { text-align: center; color: var(--tenue); padding: 36px 12px; }

.cuadricula { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.casilla { aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--borde); background: var(--asfalto); font: 400 22px var(--letrero); color: var(--texto); display: grid; place-items: center; position: relative; }
.casilla.hecha { background: #173B3A; border-color: var(--bien); color: var(--bien); }
.casilla.hecha::after { content: '✓'; position: absolute; top: 3px; right: 7px; font: 700 15px var(--cuerpo); }
.casilla.revelada { background: #3A2430; border-color: #8A4A5A; color: #E7A6B2; }
.casilla.siguiente { border-color: var(--cian); box-shadow: 0 0 0 3px rgba(0, 229, 255, .25); }

/* ---------- ejercicio ---------- */
.tarea-num { font: 400 15px var(--letrero); color: var(--cian); margin: 6px 0 4px; }
.enunciado { font-size: 21px; line-height: 1.45; margin: 0 0 16px; user-select: none; -webkit-user-select: none; }
.enunciado sup { font-size: .7em; }
.vista-previa { min-height: 36px; font-size: 22px; padding: 6px 2px; color: var(--farol); word-break: break-word; }
.teclado { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin: 6px 0 4px; }
.tecla { min-height: 48px; border-radius: 10px; border: 1px solid var(--borde); background: var(--asfalto-2); font-size: 18px; font-weight: 700; }
.tecla:active { background: var(--borde); }
.tecla.ancha { grid-column: span 2; }
.opciones { display: grid; gap: 10px; }
.opcion { padding: 16px; border-radius: 12px; border: 2px solid var(--borde); background: var(--asfalto); text-align: left; font-size: 18px; min-height: 56px; }
.opcion[aria-pressed="true"] { border-color: var(--cian); background: #10324A; }
.resultado { margin: 16px 0; padding: 16px; border-radius: var(--radio); font-size: 18px; }
.resultado.bien { background: #123A33; border: 2px solid var(--bien); }
.resultado.mal { background: #3B1C27; border: 2px solid var(--mal); }
.resultado.revelado { background: #2D2440; border: 2px solid var(--credito); }
.resultado strong { display: block; font-size: 20px; margin-bottom: 4px; }
.resultado .sol { font-size: 22px; color: var(--farol); font-weight: 700; }
.ayuda-caja { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: var(--asfalto); border: 1px solid var(--borde); }
.ayuda-caja summary { font-weight: 700; color: var(--cian); cursor: pointer; }
.nav-tareas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.estampa { animation: estampa .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes estampa { from { transform: scale(1.6); opacity: 0; } }

/* ---------- cuarto ---------- */
.cuarto { position: relative; border-radius: var(--radio); overflow: hidden; border: 3px solid var(--borde); margin: 10px 0 4px; }
.cuarto-pared { position: relative; height: 78px; display: flex; align-items: flex-end; justify-content: center; }
.cuarto-ventana { width: 70px; height: 46px; margin-bottom: 10px; border-radius: 6px; background: linear-gradient(#0A1030, #24306A); border: 4px solid rgba(255, 255, 255, .5); position: relative; }
.cuarto-ventana::after { content: ''; position: absolute; top: 7px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: #F4F1D0; box-shadow: 0 0 10px #F4F1D0; }
.cuarto-piso { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); aspect-ratio: 6 / 4; }
.cuarto-casilla { border: 1px dashed rgba(255, 255, 255, .12); background: none; font-size: clamp(30px, 10vw, 44px); line-height: 1; display: grid; place-items: center; padding: 0; }
.cuarto-casilla.elegida { outline: 3px solid var(--cian); outline-offset: -3px; }
.cuarto-yo { position: absolute; left: 14px; bottom: -2px; width: 70px; height: 70px; pointer-events: none; }
.cuarto-yo svg { width: 100%; height: 100%; }
.pestanas { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.pestanas button { flex: none; padding: 9px 14px; border-radius: 999px; border: 2px solid var(--borde); background: var(--asfalto); font-weight: 700; font-size: 15px; }
.pestanas button[aria-selected="true"] { border-color: var(--cian); color: var(--cian); }
.piezas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pieza { position: relative; aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--borde); background: var(--asfalto); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; font-size: 12px; font-weight: 600; color: var(--tenue); overflow: hidden; }
.pieza .muestra { width: 60%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 26px; }
.pieza .muestra svg { width: 100%; height: 100%; }
.pieza[aria-pressed="true"] { border-color: var(--cian); color: var(--texto); }
.pieza.bloqueada { filter: saturate(.3); opacity: .65; }
.pieza .precio { position: absolute; top: 3px; right: 4px; color: var(--farol); font-weight: 800; font-size: 11px; }
.pieza-nombre { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- bitácora ---------- */
.resumen-bit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 18px; }
.resumen-bit div { padding: 10px 6px; border-radius: 12px; background: var(--asfalto); text-align: center; }
.resumen-bit b { display: block; font: 400 22px var(--letrero); }
.resumen-bit span { font-size: 12px; color: var(--tenue); }
.nota { padding: 12px 14px; border-radius: 12px; background: var(--asfalto); margin: 0 0 8px; border-left: 5px solid var(--borde); }
.nota.pos { border-left-color: var(--bien); }
.nota.neg { border-left-color: var(--mal); }
.nota.nueva { box-shadow: 0 0 0 2px var(--cian); }
.nota strong { display: block; }
.nota small { color: var(--tenue); }
.mov { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--asfalto-2); font-size: 15px; }
.mov b.coin { color: var(--farol); }
.mov b.credit { color: var(--credito); }
.mov b.menos { color: var(--mal); }
.seccion { font: 400 16px var(--letrero); color: var(--tenue); margin: 24px 0 8px; }

/* ---------- avisos y ventanas ---------- */
.aviso { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; background: #F5F7FF; color: #0E1530; font-weight: 700; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.aviso.mal { background: var(--mal); color: #2A0710; }
.ventana { position: fixed; inset: 0; z-index: 70; background: rgba(5, 8, 25, .92); display: grid; place-items: center; padding: 16px; }
.ventana-caja { width: 100%; max-width: 420px; background: var(--asfalto); border: 2px solid var(--borde); border-radius: 18px; padding: 22px 18px 18px; }
.ventana-caja h3 { font: 400 22px var(--letrero); margin: 0 0 10px; }
.ventana-botones { display: grid; gap: 8px; }

@media (min-width: 560px) { .cuadricula { grid-template-columns: repeat(6, 1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* =====================================================================
   v2 · la ciudad viva, ARIA que habla, sonido y premios
   ===================================================================== */
/* botón de sonido */
.sonido-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--borde); background: var(--asfalto); color: var(--tenue); display: grid; place-items: center; padding: 0; }
.sonido-btn.on { color: var(--cian); border-color: var(--cian); box-shadow: 0 0 10px rgba(0, 229, 255, .35); }
.sonido-btn .ico { width: 22px; height: 22px; }
.ico-sonido { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M15 8.5a4.5 4.5 0 010 7M17.5 6a8 8 0 010 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sonido-btn:not(.on) .ico-sonido { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ARIA */
.aria-cara.con-imagen { background: center / cover no-repeat; }
.aria-ciudad { padding: 6px 16px 0; margin: 0; }
.aria-ciudad .aria-dice { font-size: 16px; min-height: 3.2em; }
.aria-dice.hablando::after { content: '▌'; color: var(--cian); animation: cursor .7s steps(1) infinite; margin-left: 1px; }
@keyframes cursor { 50% { opacity: 0; } }
.portada { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radio); background: var(--asfalto) center / cover no-repeat; border: 2px solid var(--borde); margin: 4px 0 12px; }

/* Apagados */
.apagados { display: flex; align-items: center; gap: 12px; margin: 10px 16px 2px; padding: 10px 14px; border-radius: var(--radio); background: linear-gradient(90deg, #0A0E22, var(--asfalto)); border: 1px solid #2A2F55; }
.apagados p { margin: 0; color: var(--tenue); font-size: 14px; }
.apagados-cara { flex: none; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 38% 45%, #E9ECFF 0 7%, transparent 8%), radial-gradient(circle at 62% 45%, #E9ECFF 0 7%, transparent 8%), radial-gradient(circle, #050712 0 58%, transparent 60%); filter: drop-shadow(0 0 8px #000); animation: acecha 5s ease-in-out infinite; }
.apagados-cara.con-imagen { background: center / cover no-repeat; }
@keyframes acecha { 0%, 100% { transform: translateX(0); opacity: .85; } 50% { transform: translateX(4px); opacity: 1; } }

/* la ciudad viva */
.cielo.con-imagen { background: #050819; }
.cielo-img { position: absolute; inset: 0; background: center / cover no-repeat; transition: filter 1.2s ease; }
.cielo .vida { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cielo .auto { animation: avanza linear infinite; }
.cielo .auto.a2 { animation-name: regresa; }
.cielo .auto.a3 { animation-delay: -6s; }
@keyframes avanza { from { transform: translateX(-40px); } to { transform: translateX(440px); } }
@keyframes regresa { from { transform: translateX(440px); } to { transform: translateX(-40px); } }
.cielo .faro { filter: drop-shadow(0 0 3px #FFF6C8); }
.cielo .dron { animation: vuela linear infinite; }
.cielo .dron.d2 { animation-name: vuelaAtras; animation-delay: -9s; }
.cielo .dron.d3 { animation-delay: -20s; }
@keyframes vuela { from { transform: translateX(-20px); } to { transform: translateX(420px); } }
@keyframes vuelaAtras { from { transform: translateX(420px); } to { transform: translateX(-20px); } }
.cielo .dron-flota { animation: flota 2.4s ease-in-out infinite; }
@keyframes flota { 50% { transform: translateY(-4px); } }
.cielo .dron-luz, .cielo .antena { animation: parpadeo-luz 1.1s steps(1) infinite; }
@keyframes parpadeo-luz { 50% { opacity: .15; } }
.cielo .titila { animation: titila 3s ease-in-out infinite; }
@keyframes titila { 50% { opacity: .1; } }
.cielo .neon { filter: drop-shadow(0 0 3px rgba(0, 229, 255, .9)); animation: neon 7s linear infinite; }
.cielo .neon.n1 { animation-duration: 11s; animation-delay: -3s; }
.cielo .neon.n2 { animation-name: neonFalla; animation-duration: 5s; }
.cielo .neon.n3 { animation-duration: 9s; animation-delay: -5s; }
@keyframes neon { 0%, 91%, 93%, 95%, 100% { opacity: 1; } 92%, 94% { opacity: .25; } }
@keyframes neonFalla { 0%, 60%, 62%, 64%, 70%, 100% { opacity: 1; } 61%, 63% { opacity: .2; } 66%, 68% { opacity: .5; } }
.cielo .ventana-luz.enciende { animation: enciende .5s ease both; }
@keyframes enciende { from { fill: #2A3360; } 60% { fill: #FFF1C2; } to { fill: var(--farol); } }
.cielo .ventana-luz.nueva { animation: destello 1.4s ease both; }
@keyframes destello { from { fill: #2A3360; } 30% { fill: #FFFFFF; filter: drop-shadow(0 0 6px #FFC857); } to { fill: var(--farol); } }
.cielo.lluvia { background: linear-gradient(#070B22 0%, #141D45 70%, #1C2657 100%); }
.cielo.lluvia::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(105deg, transparent 0 7px, rgba(180, 210, 255, .55) 7px 8px, transparent 8px 19px), repeating-linear-gradient(100deg, transparent 0 13px, rgba(180, 210, 255, .35) 13px 14px, transparent 14px 31px);
  background-size: 120px 120px, 170px 170px; animation: llueve .5s linear infinite; }
@keyframes llueve { to { background-position: -30px 120px, -40px 170px; } }

/* lugares con imagen */
.lugar.con-foto { position: relative; padding-left: 96px; min-height: 96px; justify-content: center; }
.lugar-foto { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 74px; height: 74px; border-radius: 10px; background: var(--asfalto-2) center / cover no-repeat; }
.lugar.cerrado .lugar-foto { filter: grayscale(.9) brightness(.6); }

/* misiones con portada */
.mision.con-portada { padding-top: 0; overflow: hidden; }
.mision-portada { display: block; margin: 0 -16px 12px; aspect-ratio: 3 / 1.15; background: var(--asfalto-2) center / cover no-repeat; }
.mision.cerrada .mision-portada { filter: grayscale(.8); }

/* cuarto con vista */
.cuarto-ventana.con-imagen { background: center / cover no-repeat; }
.cuarto-ventana.con-imagen::after { display: none; }

/* premios */
.chispas, .confeti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.chispas i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); animation: chispa .9s cubic-bezier(.15, .8, .35, 1) forwards; }
@keyframes chispa { from { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 40px)) scale(.2); opacity: 0; } }
.moneda-vuela { position: fixed; z-index: 81; width: 16px; height: 16px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 35%, #FFE6A3, var(--farol) 60%, #C98D1B); box-shadow: 0 0 8px rgba(255, 200, 87, .8); }
.confeti i { position: absolute; top: -20px; width: 9px; height: 14px; background: var(--c); border-radius: 2px; animation: cae linear forwards; }
@keyframes cae { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }
.ventanita { float: right; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 40px; height: 40px; padding: 5px; border-radius: 6px; background: #26305F; margin-left: 10px; }
.ventanita i { background: #2A3360; border-radius: 2px; }
.ventanita i:nth-child(1) { animation: enciendeCSS .4s .15s ease both; }
.ventanita i:nth-child(2) { animation: enciendeCSS .4s .35s ease both; }
.ventanita i:nth-child(3) { animation: enciendeCSS .4s .55s ease both; }
.ventanita i:nth-child(4) { animation: enciendeCSS .6s .8s ease both; }
@keyframes enciendeCSS { 0% { background: #2A3360; } 60% { background: #FFF1C2; box-shadow: 0 0 8px #FFC857; } 100% { background: var(--farol); } }

/* =====================================================================
   v3 · entrar a los lugares: cielo según la hora, zoom, interiores, puerta
   ===================================================================== */
/* el cielo sigue la hora real */
.cielo.f-madrugada { background: linear-gradient(#050819 0%, #0C1338 75%, #121B47 100%); }
.cielo.f-amanecer { background: linear-gradient(#1B2559 0%, #5B4A8F 50%, #E8875E 88%, #F6B26B 100%); }
.cielo.f-dia { background: linear-gradient(#2E5A9E 0%, #5F95D6 60%, #A9CDEF 100%); }
.cielo.f-tarde { background: linear-gradient(#2B1E5C 0%, #8E3F7C 52%, #EC7C4D 88%, #F7A85A 100%); }
.cielo.f-dia .ventana-off { fill: #39477E; }
.cielo .sol { filter: drop-shadow(0 0 14px currentColor); color: #FFD27A; }
.cielo .nube { animation: nube linear infinite; }
@keyframes nube { from { transform: translateX(-90px); } to { transform: translateX(460px); } }
.cielo.lluvia.f-dia { background: linear-gradient(#3A4A6B 0%, #5C6E8F 70%, #7D8DA8 100%); }
.cielo.lluvia.f-tarde, .cielo.lluvia.f-amanecer { background: linear-gradient(#2A2448 0%, #5A4467 70%, #7A5A6E 100%); }
.cielo .tinte { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; }
.cielo.f-amanecer .tinte { background: linear-gradient(transparent 30%, rgba(255, 150, 90, .55)); }
.cielo.f-dia .tinte { background: rgba(170, 210, 255, .45); mix-blend-mode: screen; opacity: .35; }
.cielo.f-tarde .tinte { background: linear-gradient(rgba(120, 60, 160, .4), rgba(255, 120, 70, .55)); }
.cielo.f-madrugada .tinte { background: rgba(5, 8, 25, .45); mix-blend-mode: multiply; }

/* zoom al entrar y telón */
.cielo > * { transform-origin: var(--ox, 50%) var(--oy, 60%); transition: transform .56s cubic-bezier(.55, 0, .85, .45); }
.cielo.entrando > * { transform: scale(3.4); }
.cielo > .cielo-img { transition: transform .56s cubic-bezier(.55, 0, .85, .45), filter 1.2s ease; }
.telon { position: fixed; inset: 0; z-index: 75; background: #050819; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.telon.on { opacity: 1; transition: opacity .32s ease .24s; }

/* interiores */
.interior { position: relative; margin: 0 -16px 10px; aspect-ratio: 2 / 1; overflow: hidden; background: #0B1233 center / cover no-repeat; border-bottom: 2px solid var(--borde); animation: entra-dentro .6s ease both; }
.interior.con-imagen { aspect-ratio: 3 / 2; }
.interior svg { width: 100%; height: 100%; display: block; }
@keyframes entra-dentro { from { transform: scale(1.12); opacity: 0; } }
.interior .barrido { transform-origin: 200px 64px; animation: radar 3s linear infinite; }
@keyframes radar { to { transform: rotate(360deg); } }
.interior .parpadea { animation: parpadeo-luz 1.4s steps(1) infinite; }
.interior .parpadea.p2 { animation-delay: .7s; }
.interior .led { animation: parpadeo-luz 1.8s steps(1) infinite; }
.interior .pantallita { stroke-dasharray: 60; animation: traza 2.6s linear infinite; }
@keyframes traza { from { stroke-dashoffset: 60; } to { stroke-dashoffset: -60; } }
.interior .nota-holo { animation: holo 3s ease-in-out infinite; }
@keyframes holo { 50% { opacity: .35; } }
.interior .banderin { transform-box: fill-box; transform-origin: top; animation: ondea 3s ease-in-out infinite; }
@keyframes ondea { 50% { transform: skewX(6deg); } }
.aria-dentro { margin: 2px 0 14px; }
.aria-dentro .aria-cara { width: 46px; height: 46px; }
.aria-dentro .aria-dice { font-size: 15px; padding: 10px 12px; }

/* misiones como pantallas del Centro de mando */
#vMisiones .mision { position: relative; background: linear-gradient(#0A1A33, #0D1F3D); border-color: #1F4E6E; box-shadow: inset 0 0 24px rgba(0, 229, 255, .08); }
#vMisiones .mision::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(transparent 0 3px, rgba(0, 229, 255, .035) 3px 4px); }
#vMisiones .mision::before { content: ''; position: absolute; top: 10px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 8px var(--cian); animation: parpadeo-luz 2s steps(1) infinite; z-index: 1; }
#vMisiones .mision.lista::before { background: var(--bien); box-shadow: 0 0 8px var(--bien); animation: none; }
#vMisiones .mision.cerrada::before { background: var(--apagado); box-shadow: none; animation: none; }

/* tablero del Ayuntamiento */
#vBitacora .nota { position: relative; padding-left: 26px; }
#vBitacora .nota::before { content: ''; position: absolute; left: 9px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 6px var(--cian); }
#vBitacora .nota.neg::before { background: var(--mal); box-shadow: 0 0 6px var(--mal); }

/* la puerta */
.cine { position: fixed; inset: 0; z-index: 90; background: #02040F; display: grid; place-items: center; overflow: hidden; }
.cine-fondo { position: absolute; inset: 0; background: center / cover no-repeat; opacity: .55; animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.25); } }
.portal { position: relative; width: 62vmin; height: 62vmin; display: grid; place-items: center; }
.portal i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--cian); box-shadow: 0 0 22px var(--cian), inset 0 0 22px var(--cian); opacity: .8; animation: anillo 3s linear infinite; }
.portal i:nth-child(2) { inset: 12%; border-style: dashed; animation-duration: 5s; animation-direction: reverse; border-color: var(--credito); box-shadow: 0 0 18px var(--credito); }
.portal i:nth-child(3) { inset: 26%; animation-duration: 2s; border-width: 2px; }
.portal b { width: 34%; height: 34%; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0, #9FF5FF 30%, rgba(0, 229, 255, .3) 60%, transparent 70%); animation: nucleo 1.6s ease-in-out infinite; }
@keyframes anillo { to { transform: rotate(360deg); } }
@keyframes nucleo { 50% { transform: scale(1.25); } }
.cine.corta .portal { animation: crece 1.25s cubic-bezier(.7, 0, .9, .5) forwards; }
.cine.larga .portal { animation: aparece 1.4s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes aparece { from { transform: scale(2.6); opacity: 0; } }
@keyframes crece { from { transform: scale(.4); } to { transform: scale(4); opacity: .2; } }
.cine-texto { position: absolute; left: 16px; right: 16px; bottom: 22%; text-align: center; font: 400 clamp(18px, 5.4vw, 26px)/1.35 var(--letrero); color: var(--texto); text-shadow: 0 0 12px rgba(0, 229, 255, .6); margin: 0; min-height: 2.8em; }
.cine-saltar { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--borde); background: rgba(14, 21, 48, .7); color: var(--tenue); font-weight: 700; min-height: 44px; }
.cine.flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: flash .38s ease forwards; }
@keyframes flash { from { opacity: 0; } 40% { opacity: 1; } to { opacity: 1; } }

/* =====================================================================
   v4 · la ciudad del grupo: luz, radio de ARIA y la Plaza en vivo
   ===================================================================== */
/* los Apagados oscurecen las orillas cuando el grupo no trabaja */
.cielo.con-sombra::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--sombra, 0);
  background: radial-gradient(ellipse 75% 85% at 50% 60%, transparent 45%, rgba(3, 4, 14, .95) 100%); transition: opacity 1.5s ease; animation: sombras 9s ease-in-out infinite; }
@keyframes sombras { 50% { transform: scale(1.04); } }
.luz-grupo { margin: 8px 16px 0; padding: 10px 14px; border-radius: var(--radio); background: var(--asfalto); border: 1px solid var(--borde); }
.luz-cab { display: flex; justify-content: space-between; align-items: baseline; }
.luz-cab b { font: 400 15px var(--letrero); }
.luz-cab span { font: 400 18px var(--letrero); color: var(--farol); }
.luz-barra { height: 12px; border-radius: 999px; background: #0A1029; overflow: hidden; margin: 6px 0 4px; box-shadow: inset 0 0 0 1px var(--borde); }
.luz-barra div { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #FFC857, #FFF1C2); box-shadow: 0 0 12px rgba(255, 200, 87, .7); transition: width 1s ease; }
.luz-grupo small { display: block; margin: 0; font-size: 13px; }

/* radio */
.radio { display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); margin: 10px 16px 0; padding: 8px 10px; border-radius: 12px; border: 1px solid #2A5A7A; background: #08182E; color: var(--texto); text-align: left; overflow: hidden; min-height: 44px; }
.radio-et { flex: none; font: 400 11px var(--letrero); color: #062330; background: var(--cian); padding: 3px 7px; border-radius: 6px; animation: parpadeo-luz 2.4s steps(1) infinite; }
.radio-cinta { flex: 1; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.radio-cinta span { display: inline-block; padding-left: 100%; animation: cinta linear infinite; font-size: 14px; color: #BFEFFF; }
@keyframes cinta { to { transform: translateX(-100%); } }
.radio-nota { margin: 0 0 10px; font-size: 15px; } .radio-nota small { color: var(--cian); font-weight: 700; margin-right: 4px; }

/* tarjeta de la plaza */
.lugar.plaza-tarjeta { background: linear-gradient(120deg, #10284A, var(--asfalto)); border-color: rgba(0, 229, 255, .7); }

/* la plaza */
.plaza { position: relative; width: 100%; aspect-ratio: 1 / 1.05; border-radius: var(--radio); overflow: hidden; border: 2px solid var(--borde); margin: 6px 0 8px; touch-action: manipulation; cursor: pointer; }
.plaza-suelo { position: absolute; inset: 0; background: #141C46 center / cover no-repeat; }
.plaza-suelo svg { width: 100%; height: 100%; display: block; }
.plaza-suelo .onda { animation: onda 2.6s ease-out infinite; transform-origin: 50px 44px; }
.plaza-suelo .onda.o2 { animation-delay: 1.3s; }
@keyframes onda { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.plaza-suelo .farol { animation: parpadeo-luz 4s steps(1) infinite; }
.plaza-gente { position: absolute; inset: 0; }
.persona { position: absolute; width: 56px; transform: translate(-50%, -88%); display: flex; flex-direction: column; align-items: center; transition-property: left, top; transition-timing-function: linear; pointer-events: none; }
.persona-av { width: 48px; height: 48px; border-radius: 50%; background: var(--asfalto-2); border: 2px solid var(--borde); overflow: hidden; box-shadow: 0 6px 8px rgba(0, 0, 0, .45); }
.persona-av svg { width: 100%; height: 100%; display: block; }
.persona.yo .persona-av { border-color: var(--cian); box-shadow: 0 0 0 3px rgba(0, 229, 255, .3), 0 6px 8px rgba(0, 0, 0, .45); }
.persona-nom { margin-top: 2px; max-width: 96px; padding: 1px 7px; border-radius: 999px; background: rgba(5, 8, 25, .78); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.persona.yo .persona-nom { color: var(--cian); }
.persona-nom small { color: var(--farol); font-weight: 800; }
.persona.camina .persona-av { animation: paso .32s ease-in-out infinite; }
@keyframes paso { 50% { transform: translateY(-4px); } }
.persona.izq .persona-av svg { transform: scaleX(-1); }
.burbuja { position: absolute; bottom: 100%; margin-bottom: 4px; font-size: 26px; line-height: 1; background: #F5F7FF; border-radius: 14px; padding: 5px 7px; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); animation: burbuja .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes burbuja { from { transform: scale(0) translateY(10px); } }
.persona.g-baile .persona-av { animation: baile .4s ease-in-out 5; }
@keyframes baile { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.persona.g-aplauso .persona-av, .persona.g-risa .persona-av { animation: brinca .3s ease 4; }
@keyframes brinca { 50% { transform: translateY(-7px); } }
.plaza-estado { min-height: 1.4em; margin: 0 0 6px; color: var(--farol); font-weight: 600; font-size: 14px; text-align: center; }
.gestos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gesto-btn { min-height: 64px; border-radius: 14px; border: 2px solid var(--borde); background: var(--asfalto); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.gesto-btn span { font-size: 26px; line-height: 1; }
.gesto-btn small { font-size: 12px; color: var(--tenue); font-weight: 700; }
.gesto-btn:active { border-color: var(--cian); transform: scale(.96); }

/* =====================================================================
   v5 · la historia: escenas de capítulo, mapa de barrios y archivo
   ===================================================================== */
.barrio-nombre { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mapa-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 2px solid rgba(0, 229, 255, .6); color: var(--cian); text-decoration: none; font-weight: 700; font-size: 15px; min-height: 44px; }
.mapa-btn .ico { width: 20px; height: 20px; }
.ico-mapa { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5l7-3 6 3 7-3v17l-7 3-6-3-7 3zm7 0v14m6-11v14' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* mapa */
.mapa { border-radius: var(--radio); overflow: hidden; border: 2px solid var(--borde); margin: 8px 0 12px; }
.mapa svg { display: block; width: 100%; height: auto; }
.mapa .camino { stroke: #1B2450; stroke-width: 5; stroke-dasharray: 2 6; stroke-linecap: round; }
.mapa .camino.abierto { stroke: #FFC857; stroke-opacity: .6; stroke-dasharray: none; stroke-width: 3; }
.mapa .zona { cursor: pointer; }
.mapa .zona polygon { fill: #0B0F24; stroke: #252B52; stroke-width: 2; transition: fill .3s; }
.mapa .zona.viva polygon { fill: #17295A; stroke: #00E5FF; stroke-opacity: .7; filter: drop-shadow(0 0 6px rgba(0, 229, 255, .35)); }
.mapa .zona.elegida polygon { stroke: #FFC857; stroke-width: 3; stroke-opacity: 1; }
.mapa .zona-nom { font: 400 11px var(--letrero); fill: var(--texto); }
.mapa .zona.oscura .zona-nom { fill: #3A4170; }
.mapa .zona-pct { font: 700 10px var(--cuerpo); fill: var(--farol); }
.mapa .ojo { animation: parpadeo-luz 3.5s steps(1) infinite; }
.mapa .pulso { transform-box: fill-box; transform-origin: center; animation: pulso 1.6s ease-out infinite; }
@keyframes pulso { from { transform: scale(1); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
.mapa-ficha { padding: 14px 16px; border-radius: var(--radio); background: var(--asfalto); border: 2px solid rgba(0, 229, 255, .5); }
.mapa-ficha.oscura { border-color: var(--borde); opacity: .85; }
.mapa-ficha small { color: var(--cian); font-weight: 700; }
.mapa-ficha h3 { font: 400 22px var(--letrero); margin: 2px 0 6px; }
.mapa-ficha p { margin: 0 0 4px; color: var(--tenue); }
.mapa-ficha .boton { text-align: center; text-decoration: none; }

/* escena */
.escena { position: fixed; inset: 0; z-index: 88; background: #02040F; overflow: hidden; cursor: pointer; animation: aparece-esc .5s ease both; }
@keyframes aparece-esc { from { opacity: 0; } }
.escena.sale { animation: sale-esc .45s ease forwards; }
@keyframes sale-esc { to { opacity: 0; } }
.escena-img { position: absolute; inset: 0 0 34% 0; background: center / cover no-repeat; }
.escena-img svg { width: 100%; height: 100%; display: block; }
.escena-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, #02040F); }
.escena-img.mueve.kb0 { animation: kb0 9s ease-out both; }
.escena-img.mueve.kb1 { animation: kb1 9s ease-out both; }
@keyframes kb0 { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.16) translate(-3%, -2%); } }
@keyframes kb1 { from { transform: scale(1.16) translate(3%, -1%); } to { transform: scale(1.03) translate(0, 0); } }
.escena-cap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 16px; background: radial-gradient(circle, rgba(2, 4, 15, .4), #02040F 75%); animation: cap-in 2.2s ease both; }
@keyframes cap-in { 0% { opacity: 0; letter-spacing: .3em; } 30% { opacity: 1; letter-spacing: .02em; } 85% { opacity: 1; } 100% { opacity: 0; } }
.escena-cap small { color: var(--cian); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.escena-cap b { font: 400 clamp(30px, 9vw, 44px)/1.1 var(--letrero); text-shadow: 0 0 18px rgba(0, 229, 255, .5); }
.escena-cap span { color: var(--tenue); font-size: 18px; }
.escena-pie { position: absolute; left: 16px; right: 16px; bottom: calc(70px + env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: flex-start; max-width: 560px; margin: 0 auto; }
.escena-pie p { margin: 0; flex: 1; font-size: 19px; line-height: 1.45; min-height: 4.4em; }
.escena-toca { position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); text-align: center; color: var(--tenue); font-size: 14px; margin: 0; animation: titila 2s ease-in-out infinite; }

/* archivo de escenas */
.archivo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.archivo-esc { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px; border-radius: 12px; border: 2px solid var(--borde); background: linear-gradient(135deg, #10203F, var(--asfalto)); min-height: 76px; }
.archivo-esc small { color: var(--cian); font-weight: 700; }
.archivo-esc b { font: 400 15px var(--letrero); }
.archivo-esc span { color: var(--tenue); font-size: 13px; }

/* =====================================================================
   v6 · caminar por el barrio (vista desde arriba)
   ===================================================================== */
.barrio-btns { display: flex; gap: 6px; }
.barrio-btns .mapa-btn { padding: 8px 11px; }
.ico-pie { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='13' cy='4' r='2.2'/%3E%3Cpath d='M10 22l2-7 3 3v4M9 12l2-4 4 1 2 4M11 8l-2 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.caminar { padding-top: 8px; }
.caminar-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.caminar-cab .tenue { margin: 0; font-size: 14px; }
.lienzo { position: relative; margin: 6px -16px 0; border-top: 2px solid var(--borde); border-bottom: 2px solid var(--borde); overflow: hidden; background: #050819; }
.lienzo canvas { display: block; width: 100%; touch-action: manipulation; cursor: pointer; }
.caminar-aria { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; gap: 10px; align-items: flex-start; animation: entra-dentro .35s ease both; pointer-events: none; }
.caminar-aria .aria-cara { width: 44px; height: 44px; }
.caminar-aria p { margin: 0; flex: 1; padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: rgba(14, 21, 48, .92); border: 1px solid var(--cian); font-size: 15px; }
.caminar-entrar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 14px 22px; border-radius: 999px; border: 0; background: var(--cian); color: #062330; font-weight: 800; font-size: 17px; min-height: 52px; box-shadow: 0 6px 0 #0091A3, 0 0 24px rgba(0, 229, 255, .5); white-space: nowrap; animation: burbuja .35s cubic-bezier(.2, 1.6, .4, 1); }