:root{
  --teal:#2F5B5B; --teal-d:#234545; --orange:#E8743B; --bg:#F4F1EA;
  --ok:#2E8B57; --lock:#9aa0a0; --card:#fff; --ink:#243131;
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink)}
button{font-family:inherit;cursor:pointer}
.muted{color:#6b7575;font-size:.85rem} .aviso{color:#6b7575;font-size:.78rem;max-width:380px;margin:14px auto 0}

/* Login */
.login{max-width:420px;margin:6vh auto;background:var(--card);padding:28px 24px;border-radius:18px;box-shadow:0 8px 30px #0001;text-align:center}
.login h1{color:var(--teal);margin:0 0 6px}
.login form{display:flex;flex-direction:column;gap:12px;text-align:left;margin-top:18px}
.login label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:bold;color:var(--teal-d)}
.login input,.login select{padding:11px;border:2px solid #dfe3e0;border-radius:10px;font-size:1rem}
.login button[type=submit]{background:var(--orange);color:#fff;border:0;padding:13px;border-radius:12px;font-size:1.05rem;font-weight:bold;margin-top:6px}
.login.candado{max-width:360px;overflow:hidden}
.logo-band{background:linear-gradient(160deg,#2F5B5B,#3a7068);margin:-28px -24px 20px;padding:24px 20px}
.login-logo{width:min(80%,260px);height:auto;display:block;margin:0 auto}
.login.candado input{text-align:center;letter-spacing:6px;font-size:1.3rem}
.login.candado .aviso{color:#c0392b;min-height:18px}

/* Header */
.barra{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;background:var(--teal);color:#fff;flex-wrap:wrap;position:sticky;top:0;z-index:5}
.marca{font-weight:bold;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;gap:8px}
.avatar-mini{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:top center;background:#ffffff22;border:2px solid #ffffff55}
.pasaporte-head{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.avatar-grande{width:84px;height:84px;border-radius:18px;object-fit:cover;object-position:top center;background:#fff;border:2px solid #e3e7e4}
.avatar-fest{height:160px;width:auto;filter:drop-shadow(0 6px 8px #0006)}
.avatar-fest.salta{animation:festejo .6s ease-in-out infinite}
@keyframes festejo{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}
.recursos{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{background:#ffffff22;padding:5px 10px;border-radius:20px;font-weight:bold;font-size:.9rem}
.link{background:#ffffff22;color:#fff;border:0;padding:6px 12px;border-radius:20px;font-size:.85rem;text-decoration:none;display:inline-block}
.link:hover{background:#ffffff38}

/* Mapa */
main{padding:16px;max-width:1000px;margin:0 auto}
.mapa h2,.estado-det h2,.tienda h2,.pasaporte h2{color:var(--teal);font-size:1.15rem}
/* ===== Mapa estilo claymation (mockup) ===== */
main{padding-bottom:96px}            /* espacio para la barra inferior flotante */
.mapa-escena{border-radius:24px}
.mapa-mx{position:relative;border-radius:24px;padding:10px;min-height:60vh;overflow:hidden;
  background:linear-gradient(180deg,#bfe3f5 0%,#8fd0ee 55%,#6fc1e6 100%);
  box-shadow:inset 0 4px 18px #0b4a6a22, 0 10px 28px #0b4a6a22}
.mx-svg{width:100%;height:auto;display:block;position:relative;z-index:1;
  filter:drop-shadow(0 10px 10px #0b3a5526)}
.mx-svg .edo{stroke:#fff;stroke-width:1.5;filter:url(#f-bevel);cursor:pointer;
  transition:filter .15s,transform .15s;transform-box:fill-box;transform-origin:center}
.mx-svg .edo:hover{filter:url(#f-bevel) brightness(1.12);transform:translateY(-1px) scale(1.03)}
.mx-marker{font-size:20px;pointer-events:none;filter:drop-shadow(0 2px 2px #0006)}
/* nombre de cada estado */
.mx-svg .edo-label{font-family:Arial,sans-serif;font-size:9px;font-weight:bold;fill:#fff;
  stroke:#2b3a3a;stroke-width:2.4px;paint-order:stroke fill;stroke-linejoin:round;pointer-events:none}
/* huellitas del recorrido */
.huella{position:absolute;z-index:5;font-size:19px;pointer-events:none;opacity:0;
  animation:huellaFade 4.6s ease forwards;filter:drop-shadow(0 1px 2px #0006)}
@keyframes huellaFade{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}

/* decoraciones del océano */
.oceano-deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.oceano-deco .deco{position:absolute;font-size:30px;filter:drop-shadow(0 3px 3px #0003);animation:flotaDeco 4s ease-in-out infinite}
.oceano-deco .deco:nth-child(even){animation-duration:5.2s}
@keyframes flotaDeco{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* tarjetas flotantes */
.mapa-mx .card{position:absolute;z-index:3;background:#fffefb;border-radius:16px;padding:9px 13px;
  box-shadow:0 6px 16px #0b3a5530;font-size:.82rem;border:2px solid #fff}
.card-titulo{top:12px;right:12px;text-align:center;color:var(--teal);font-size:.95rem;line-height:1.15}
.card-titulo .t-mex{color:var(--orange);font-weight:bold;font-size:1.2rem}
.card-leyenda{bottom:12px;right:12px;display:flex;flex-direction:column;gap:3px}
.card-leyenda .lg{white-space:nowrap;color:#5a6b6b}
.card-sigue{top:84px;right:12px;max-width:185px}
.card-sigue b{color:var(--teal)}
.card-progreso{bottom:12px;left:12px;min-width:165px}
.prog-txt{font-weight:bold;color:var(--teal-d);font-size:.8rem;margin-bottom:5px}
.prog-bar{position:relative;height:18px;background:#e6ece9;border-radius:10px;overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,#8A5BA0,#6B3FA0);border-radius:10px;min-width:6%}
.prog-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:bold;color:#3a2a4a}
.hint-linea{text-align:center;margin-top:8px}

/* barra de navegación inferior */
.nav-inferior{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:40;
  display:flex;gap:4px;background:#fffefb;border-radius:22px;padding:7px 9px;
  box-shadow:0 8px 24px #0b3a5540;border:2px solid #fff}
.nav-item{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:4px 12px;border-radius:16px;color:#7a8585;font-size:.66rem;font-weight:bold;cursor:pointer}
.nav-item .ic{width:34px;height:34px;object-fit:contain;display:block;transition:transform .15s}
.nav-item .ic-emoji{font-size:26px;line-height:34px;text-align:center}
.nav-item:hover .ic{transform:scale(1.1)}
/* Mis tareas */
.tareas-main{max-width:560px;margin:0 auto;padding:8px 14px 120px}
.tareas-cargando{text-align:center;color:#7a86aa;padding:40px 0;font-weight:bold}
.tareas-tit{font-size:1.25rem;color:#b5530f;margin:8px 4px 4px}
.tareas-dest{display:inline-block;background:#fff3d6;border:1.5px solid #f0c067;color:#8a5a12;font-weight:bold;font-size:.82rem;border-radius:10px;padding:3px 10px;margin:0 4px 10px}
.tareas-prog{background:#fff;border:2px solid #f0c067;border-radius:12px;padding:9px 12px;font-size:.95rem;color:#7a4e12;margin-bottom:12px}
.tareas-prog .tp-bar{height:12px;background:#f0e3c8;border-radius:7px;overflow:hidden;margin-top:5px}
.tareas-prog .tp-fill{height:100%;background:linear-gradient(90deg,#ffd36b,#f0a93b);transition:width .4s}
.tareas-list{display:flex;flex-direction:column;gap:9px}
.tarea-row{display:flex;align-items:center;gap:11px;background:#fff;border:2px solid #e7d4ad;border-radius:14px;padding:10px 12px;box-shadow:0 2px 5px #0001}
.tarea-row.ok{border-color:#9be88a;background:#f1fbef}
.tarea-row .tr-em{font-size:2rem;line-height:1}
.tarea-row .tr-tx{flex:1;font-weight:bold;color:#2a2150}
.tarea-row .tr-tx small{display:block;font-weight:normal;color:#8a7a55;font-size:.78rem}
.tarea-row .tr-jugar{background:linear-gradient(#e8743b,#c95a25);color:#fff;border:0;font-weight:bold;border-radius:11px;padding:9px 15px;cursor:pointer;box-shadow:0 3px 0 #0002}
.tarea-row .tr-jugar:active{transform:translateY(2px)}
.tarea-row .tr-ok{font-size:1.5rem}
.tareas-fin{margin-top:14px;text-align:center;background:#eafaf1;border:2px solid #b8e8cc;border-radius:13px;padding:13px;color:#1d7a50;font-weight:bold}
.tareas-vacio{text-align:center;padding:36px 16px}
.tareas-vacio .tv-emoji{font-size:3.4rem}
.tareas-vacio h2{color:#b5530f;margin:8px 0 4px}
.tareas-vacio .btn-primario{margin-top:14px;background:linear-gradient(#e8743b,#c95a25);color:#fff;border:0;font-weight:bold;border-radius:13px;padding:12px 22px;cursor:pointer;box-shadow:0 4px 0 #0002}
.nav-item.on{background:#eaf4f1;color:var(--teal)}
.nav-item.on .ic{filter:drop-shadow(0 2px 3px #0003)}
.nav-item:hover{background:#f1f4f2}

/* engrane (maestro discreto) */
.gear{font-size:1.05rem;padding:5px 9px}

/* vista próximamente */
.proxima{display:flex;align-items:center;justify-content:center;min-height:58vh}
.proxima-card{background:#fff;border-radius:20px;padding:34px 28px;text-align:center;box-shadow:0 8px 24px #0001;max-width:340px}
.px-emoji{font-size:3.4rem}
.proxima-card h2{color:var(--teal);margin:8px 0}
.px-badge{display:inline-block;background:#FFE9D5;color:var(--orange);font-weight:bold;padding:4px 12px;border-radius:20px;font-size:.8rem;margin-top:8px}

/* Personaje que camina (overlay HTML, intercambiable por el de tu equipo) */
/* Selector de personaje en el login */
.avatares{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
.av{background:#f3f1ea;border:2px solid #dfe3e0;border-radius:12px;padding:4px;cursor:pointer;aspect-ratio:1;display:flex;align-items:center;justify-content:center;transition:.12s}
.av img{max-width:100%;max-height:100%;object-fit:contain}
.av:hover{border-color:var(--orange)}
.av.sel{border-color:var(--orange);background:#fff;box-shadow:0 0 0 3px #E8743B44}

.caminante{position:absolute;width:56px;height:74px;z-index:6;pointer-events:none;
  transform:translate(-50%,-92%);transition:left 2.4s ease-in-out, top 2.4s ease-in-out}
/* personaje (pose fija): brinquito que simula caminar */
.caminante img.kid{width:100%;height:auto;display:block;transform-origin:bottom center;
  animation:brinco 0.6s ease-in-out infinite;filter:drop-shadow(0 3px 3px #0005)}
.caminante.caminando img.kid{animation:brinco .34s ease-in-out infinite}
@keyframes brinco{0%,100%{transform:translateY(0) scaleY(1)}
  45%{transform:translateY(-7px) scaleY(1.04)}
  55%{transform:translateY(-7px) scaleY(1.04)}}
/* sprite sheet del equipo: ciclo de cuadros */
.caminante .kid.sprite{background-repeat:no-repeat;image-rendering:auto;
  filter:drop-shadow(0 3px 3px #0004)}
.caminante .sombra{position:absolute;left:50%;bottom:-2px;width:30px;height:8px;
  transform:translateX(-50%);background:#0003;border-radius:50%;filter:blur(1px);animation:sombra .5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes paso{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
@keyframes sombra{0%,100%{width:30px;opacity:.35}50%{width:22px;opacity:.2}}
@keyframes sprite-walk{to{background-position-x:var(--end)}}
.grid-estados{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.estado{display:flex;flex-direction:column;gap:4px;background:var(--card);border:2px solid #e3e7e4;border-radius:14px;padding:12px;text-align:left;min-height:96px;transition:.15s}
.estado:not(.bloq):hover{border-color:var(--orange);transform:translateY(-2px)}
.estado.bloq{opacity:.5;background:#eceae4}
.estado.comp{border-color:var(--ok);background:#f0faf3}
.estado .num{position:absolute} .estado .num{font-size:.7rem;color:var(--lock);font-weight:bold}
.estado .nom{font-weight:bold;color:var(--teal-d)}
.estado .mon{font-size:.85rem;color:var(--orange);font-weight:bold}
.estado .prog{font-size:.8rem;color:#6b7575}

/* Temas */
.volver{background:#fff;border:2px solid #dfe3e0;border-radius:10px;padding:7px 12px;margin-bottom:10px}
.temas{display:flex;flex-direction:column;gap:10px}
.tema{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--card);border:2px solid #e3e7e4;border-radius:12px;padding:14px;text-align:left}
.tema:not(.bloq):hover{border-color:var(--orange)}
.tema.bloq{opacity:.5}
.tema .mat{background:#DDEBF7;color:#1b4e7a;padding:3px 9px;border-radius:8px;font-size:.72rem;font-weight:bold}
.tema .tt{font-weight:bold} .tema .st{font-size:.85rem;color:var(--orange);font-weight:bold;white-space:nowrap}

/* Tienda */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.item{display:flex;align-items:center;gap:12px;background:var(--card);border:2px solid #e3e7e4;border-radius:14px;padding:14px}
.item .emoji{font-size:2rem} .item .info{flex:1;display:flex;flex-direction:column}
.item button{background:var(--orange);color:#fff;border:0;padding:9px 14px;border-radius:10px;font-weight:bold}
.item button:disabled{background:#cfd4d1;color:#fff}

/* Pasaporte — progreso, medalla y sellos de aventurero */
.sellos-titulo{color:var(--teal);margin:22px 0 4px}
.progreso-av{background:#fff;border:2px solid #e3e7e4;border-radius:16px;padding:16px;margin-top:12px;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between}
.hitos{display:flex;align-items:center;gap:6px}
.hito{display:flex;flex-direction:column;align-items:center;font-size:1.3rem;color:#cfd4d1;position:relative}
.hito b{font-size:.7rem;color:#9aa0a0;font-weight:bold}
.hito:not(:last-child)::after{content:"·····";position:absolute;left:100%;color:#dfe3e0;font-size:1rem;letter-spacing:1px}
.hito.on{color:var(--orange)} .hito.on b{color:var(--teal-d)}
.medalla{display:flex;align-items:center;gap:10px;font-size:.82rem;color:#6b7575;max-width:300px}
.med-circ{width:54px;height:54px;border-radius:50%;border:2px dashed #cfd4d1;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0}
.medalla.ganada .med-circ{border-style:solid;border-color:#E8B43B;background:#FFF6DE}
.medalla.ganada{color:var(--teal-d);font-weight:bold}

.sellos-aventurero{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:14px;margin-top:8px}
.sello-card{text-align:center;background:none;border:0;cursor:pointer;padding:4px;transition:transform .15s}
.sello-card:hover{transform:translateY(-3px)}
.sello-circ{width:80px;height:80px;border-radius:50%;margin:0 auto;position:relative;
  display:flex;align-items:center;justify-content:center}
.sello-img{width:100%;height:100%;object-fit:contain;border-radius:50%;
  filter:grayscale(1) opacity(.3);transition:filter .4s ease,transform .4s ease}
.sello-card:not(.sellado) .sello-circ{box-shadow:inset 0 0 0 2.5px #d9e0dc;border-radius:50%}
.sello-card.sellado .sello-img{filter:none;transform:rotate(-6deg)}
.sello-card.sellado .sello-circ{filter:drop-shadow(0 4px 9px rgba(0,0,0,.25))}
.sello-num{font-weight:bold;color:var(--teal-d);margin-top:6px;font-size:.95rem}
.sello-card.sellado .sello-num{color:var(--c)}
.sello-nom{font-size:.64rem;color:#6b7575;line-height:1.12;margin-top:1px}

.pasaportes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;margin-top:8px}
.pasaporte-card{position:relative;background:none;border:0;padding:0;cursor:pointer;transition:transform .15s}
.pasaporte-card:hover{transform:translateY(-4px) scale(1.02)}
.pp-bg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 12px #0003)}
.pp-foto{position:absolute;object-fit:cover;object-position:top center;border-radius:6px}
/* estados aún no visitados: pasaporte tenue (foto puesta pero sin sello) */
.pasaporte-card:not(.visitado){filter:saturate(.7) opacity(.92)}
.pp-sello{position:absolute;top:5%;right:8%;font-size:1.5rem;filter:drop-shadow(0 1px 2px #0007)}

/* Visor de recompensas (cuento, caricaturas) */
.visor{position:fixed;inset:0;background:#1b1b1b;z-index:60;display:flex;flex-direction:column}
.visor iframe{flex:1;width:100%;border:0}
.visor-cerrar{position:absolute;top:12px;right:12px;background:#0009;color:#fff;border:0;padding:9px 16px;border-radius:20px;font-weight:bold;z-index:2;cursor:pointer}
.item .abrir{background:var(--teal)}
.item .puesto{background:#2E8B57;color:#fff;border:0;padding:9px 14px;border-radius:10px;font-weight:bold;cursor:pointer}
/* sombrero charro puesto sobre el personaje del mapa */
.caminante .cosmetico-sombrero{position:absolute;left:50%;top:-14%;width:78%;
  transform:translateX(-50%);z-index:2;pointer-events:none;filter:drop-shadow(0 2px 2px #0004)}

/* Game host (overlay) */
#game-host{display:none;position:fixed;inset:0;background:#0e1a1a;z-index:50}
#game-host.activo{display:block}
.game-frame{width:100%;height:100%;border:0}
.salir-juego{position:absolute;top:12px;right:12px;background:#0008;color:#fff;border:0;padding:8px 14px;border-radius:20px;z-index:2}
.modo-demo{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;background:#1b2b2bF2;color:#fff;padding:10px 14px;z-index:3;font-size:.82rem}
.modo-demo code{background:#fff2;padding:1px 5px;border-radius:5px}
.modo-demo button{border:0;border-radius:10px;padding:9px 16px;font-weight:bold;cursor:pointer}
#md-abrir{background:#2F5B5B;color:#fff} #md-ok{background:#2E8B57;color:#fff} #md-no{background:#E8743B;color:#fff}
.proximamente,.resultado{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;gap:10px;padding:24px}
.proximamente code{background:#fff2;padding:2px 6px;border-radius:6px}
.resultado .confeti{font-size:4rem;animation:pop .5s ease}
.resultado.exito h2{color:#7CFFB0} .resultado.reintenta h2{color:#FFD27C}
.resultado .botones{display:flex;gap:10px;margin-top:12px}
.resultado button,.proximamente button{background:var(--orange);color:#fff;border:0;padding:12px 20px;border-radius:12px;font-weight:bold;font-size:1rem}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

/* Pantalla de carga de marca (cubre el parpadeo mientras baja el juego) */
.cargando-juego{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:linear-gradient(160deg,#2F5B5B,#3a7068);color:#fff}
.cargando-juego .carga-logo{width:min(72%,300px);height:auto;margin-bottom:4px}
.cargando-juego p{font-weight:bold;font-size:1.05rem;opacity:.92}
.cargando-juego .spin{width:48px;height:48px;border:5px solid #ffffff3a;border-top-color:#FFD27C;border-radius:50%;animation:girar 1s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ===================== RESPONSIVO ===================== */
/* Tablet */
@media (max-width: 1024px){
  main{ padding:14px; }
  .oceano-deco .deco{ font-size:26px; }
  .mapa-mx{ min-height:52vh; }
  .card-sigue{ max-width:165px; }
}
/* Celular */
@media (max-width: 560px){
  main{ padding:10px; }
  .chip{ font-size:.78rem; padding:4px 8px; }
  .oceano-deco .deco{ font-size:20px; }
  .mapa-mx{ min-height:46vh; padding:6px; }
  .card-titulo{ font-size:.8rem; } .card-titulo .t-mex{ font-size:1rem; }
  /* en celular el mapa es chico: ocultamos la tarjeta flotante (tapaba el mapa);
     el "¡Sigue aprendiendo!" pasa a la línea de abajo (hint-linea) */
  .card-sigue{ display:none }
  .hint-linea{ font-weight:bold; color:var(--teal) }
  .card-leyenda{ font-size:.7rem; padding:7px 9px; gap:2px; }
  .card-progreso{ min-width:138px; font-size:.72rem; padding:7px 9px; }
  /* casilleros de tema: el estado pasa a segunda línea y envuelve (legible + tocable) */
  .tema{ grid-template-columns:auto 1fr; gap:6px 10px; padding:13px; }
  .tema .st{ grid-column:1 / -1; white-space:normal; text-align:left; }
  /* barra modo demo y botones más grandes para dedos */
  .modo-demo{ font-size:.74rem; padding:8px 10px; gap:8px; }
  .modo-demo button{ padding:11px 15px; }
  .salir-juego{ padding:10px 15px; }
  .nav-item .ic{ width:30px; height:30px; }
  .resultado button,.proximamente button{ padding:13px 20px; }
  /* pantalla de avatar/login: full-bleed (sin card pegado a los bordes) y grid de avatares que reflowa */
  .login:not(.candado){ max-width:none; margin:0; min-height:100vh; min-height:100dvh; border-radius:0; box-shadow:none; padding:22px 16px 34px }
  .avatares{ grid-template-columns:repeat(auto-fill,minmax(58px,1fr)) }
  .av{ max-width:84px }
}

/* ===== Avatar guía: globo (letrero) de bienvenida + botón de voz ===== */
.mapa-escena{ position:relative; }
.bocadillo{
  position:absolute; z-index:60; min-width:130px; max-width:210px; padding:11px 15px; box-sizing:border-box;
  background:#fff; color:#1f2a37; border:2.5px solid var(--teal); border-radius:18px;
  font-weight:800; font-size:15px; line-height:1.22; text-align:center;
  box-shadow:0 10px 26px rgba(20,60,80,.22); opacity:0; pointer-events:none;
  transform:scale(.7); transform-origin:bottom center;
  transition:opacity .26s ease, transform .26s cubic-bezier(.34,1.56,.64,1);
}
.bocadillo.abajo{ transform-origin:top center; }
.bocadillo.show{ opacity:1; transform:scale(1); }
.bocadillo::after{               /* colita del globo hacia el avatar */
  content:""; position:absolute; top:100%; left:var(--tail,50%); transform:translateX(-50%);
  border:10px solid transparent; border-top-color:var(--teal);
}
.bocadillo::before{
  content:""; position:absolute; top:100%; left:var(--tail,50%); transform:translateX(-50%) translateY(-3px);
  border:9px solid transparent; border-top-color:#fff; z-index:1;
}
.bocadillo.abajo::after{ top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--teal); }
.bocadillo.abajo::before{ top:auto; bottom:100%; transform:translateX(-50%) translateY(3px); border-top-color:transparent; border-bottom-color:#fff; }

.btn-bocina{
  position:absolute; right:12px; bottom:12px; z-index:70;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; box-shadow:0 5px 16px rgba(20,60,80,.22); font-size:21px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:transform .12s ease;
}
.btn-bocina:active{ transform:scale(.9); }
.btn-bocina.off{ opacity:.6; }
.btn-ayuda{
  position:absolute; right:12px; bottom:64px; z-index:70;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:var(--teal); box-shadow:0 5px 16px rgba(20,60,80,.22);
  font-size:22px; font-weight:900; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:transform .12s ease;
}
.btn-ayuda:active{ transform:scale(.9); }

/* ===== Toast de voces de evento (estado / estrella / sello) ===== */
.evento-toast{
  position:fixed; top:14px; left:50%; z-index:150; transform:translate(-50%,-22px) scale(.9);
  display:flex; align-items:center; gap:12px; max-width:min(440px,92vw);
  background:#fff; border:3px solid var(--orange); border-radius:999px; padding:8px 20px 8px 10px;
  box-shadow:0 12px 30px rgba(20,60,80,.28); opacity:0; pointer-events:none;
  transition:opacity .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.evento-toast.show{ opacity:1; transform:translate(-50%,0) scale(1); }
.evento-toast .ev-av{ width:54px; height:54px; object-fit:contain; object-position:bottom; flex:0 0 auto; filter:drop-shadow(0 3px 5px rgba(0,0,0,.2)); }
.evento-toast .ev-tx{ font-weight:900; font-size:1.05rem; color:#243131; line-height:1.18; }
.evento-toast.pop .ev-tx{ animation:ev-pop .3s ease; }
@keyframes ev-pop{ 0%{transform:scale(.8)} 60%{transform:scale(1.08)} 100%{transform:scale(1)} }
@media (max-width:560px){
  .evento-toast{ padding:7px 16px 7px 8px; gap:9px; }
  .evento-toast .ev-av{ width:46px; height:46px; }
  .evento-toast .ev-tx{ font-size:.95rem; }
}

/* ===== Popup de bienvenida / cómo se juega ===== */
.intro-ov{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(20,40,45,.55); backdrop-filter:blur(3px); padding:18px;
  opacity:0; transition:opacity .26s ease;
}
.intro-ov.show{ opacity:1; }
.intro-card{
  position:relative; width:min(460px,94vw); max-height:90vh; overflow:auto;
  background:#fff; border-radius:24px; padding:16px 24px 24px; text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.35); transform:translateY(16px) scale(.96);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.intro-ov.show .intro-card{ transform:translateY(0) scale(1); }
.intro-avatar{
  display:block; margin:2px auto 4px; height:106px; width:auto; max-width:62%;
  object-fit:contain; object-position:bottom; filter:drop-shadow(0 6px 10px rgba(0,0,0,.22));
}
.intro-cerrar{
  position:absolute; top:10px; right:12px; z-index:3; width:34px; height:34px; border-radius:50%;
  border:none; cursor:pointer; background:#eef1f0; color:#5a6b6b; font-size:15px; font-weight:900; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:transform .12s ease, background .15s;
}
.intro-cerrar:hover{ background:#e2e7e6; }
.intro-cerrar:active{ transform:scale(.9); }
.intro-tit{ color:var(--teal); font-size:1.32rem; line-height:1.2; margin:4px 0 2px; }
.intro-tit span{ color:var(--orange); }
.intro-sub{ color:var(--ink); font-weight:700; margin:6px 0 12px; }
.intro-pasos{ list-style:none; padding:0; margin:0 auto 14px; max-width:340px; text-align:left; display:grid; gap:9px; }
.intro-pasos li{
  display:flex; align-items:center; gap:12px; background:var(--bg);
  border-radius:14px; padding:10px 13px; font-size:1rem; color:var(--ink); font-weight:600;
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* resaltado mientras el guía lee cada renglón */
.intro-pasos li.leyendo{ background:#fff1e0; box-shadow:inset 0 0 0 2.5px var(--orange); transform:scale(1.03); }
.intro-tit{ transition:transform .2s ease; }
.intro-tit.leyendo{ transform:scale(1.04); }
.intro-msg.leyendo{ box-shadow:0 0 0 3px rgba(232,116,59,.4); }
.intro-pasos .ip-ic{ font-size:1.5rem; flex:0 0 auto; }
.login-sep{ display:inline-block; background:#e7f3f0; color:var(--teal); font-weight:800;
  font-size:.9rem; padding:7px 14px; border-radius:999px; margin:2px auto 6px; }
.intro-escuela{ color:var(--teal); font-weight:700; font-size:.98rem; margin:0 auto 10px; max-width:360px; }
.intro-escuela b{ color:var(--teal); }
.intro-msg{
  background:linear-gradient(90deg,#fff3e6,#ffe9d4); border:2px dashed var(--orange);
  border-radius:14px; padding:11px 14px; font-size:1.05rem; color:#9a4a1f; margin:0 auto 18px; max-width:360px;
}
.intro-btn{
  background:var(--orange); color:#fff; border:none; border-radius:999px;
  font-size:1.15rem; font-weight:900; padding:13px 34px; cursor:pointer;
  box-shadow:0 8px 20px rgba(232,116,59,.45); transition:transform .12s ease;
}
.intro-btn:active{ transform:scale(.95); }
@media (max-width:560px){
  .intro-card{ padding:48px 18px 20px; border-radius:20px; }
  .intro-tit{ font-size:1.15rem; }
  .intro-pasos li{ font-size:.95rem; padding:9px 11px; }
  .intro-msg{ font-size:.98rem; }
  .btn-ayuda{ width:40px; height:40px; font-size:20px; bottom:58px; right:10px; }
}
@media (max-width:560px){
  .bocadillo{ font-size:14px; min-width:112px; max-width:170px; padding:9px 12px; }
  .btn-bocina{ width:40px; height:40px; font-size:19px; right:10px; bottom:10px; }
}

/* Enlace discreto a la demo institucional (registro/panel) en el login */
.demo-inst{ margin-top:18px; text-align:center; font-size:.82rem; color:var(--lock); display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap }
.demo-inst span{ opacity:.85 }
.demo-inst a{ color:var(--teal); font-weight:800; text-decoration:none; border:1.5px solid var(--teal); border-radius:999px; padding:5px 12px }
.demo-inst a:hover{ background:var(--teal); color:#fff }