/* EL CORREDOR DE LAS INTERRUPCIONES.
 *
 * Gonzalo pidio «otra dinamica estilo runner, otro juego, tal vez en otro
 * lado». Va en la pagina de tesis y no en la portada porque ahi ya hay cuatro
 * juegos, y porque su mecanica ES la tesis de esa pagina: lo que cuesta una
 * interrupcion no es el segundo que dura, es lo que tardas en volver.
 */
.runner{position:relative;max-width:850px;margin:26px auto;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;background:#071021}
.runner canvas{display:block;width:100%;height:clamp(230px,38vh,330px);touch-action:manipulation;cursor:pointer}
.runner canvas:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.runner__hud{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;gap:10px;
  padding:10px 12px;font:700 13px/1.2 "Source Sans 3",sans-serif;color:#eaf1ff;pointer-events:none;
  background:linear-gradient(180deg,#020815cc,transparent)}
.runner__hud b{font-variant-numeric:tabular-nums}
.runner__hud span+span{margin-left:auto}
.runner__barra{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;gap:10px;
  align-items:center;padding:10px 12px;background:linear-gradient(0deg,#020815ee,transparent)}
.runner__barra button{min-height:44px;padding:11px 18px;border:1px solid #86afff;border-radius:10px;
  background:#0b1f3aed;color:#eaf1ff;font:700 15px "Source Sans 3",sans-serif;cursor:pointer}
.runner__barra button[data-primario]{background:#1d4ed8;border-color:#1d4ed8}
.runner__barra p{margin:0;color:#c6d8f5;font-size:13px;line-height:1.35}
.runner__leccion{max-width:850px;margin:0 auto 26px;padding:16px 18px;
  border-left:3px solid var(--accent);background:var(--cream)}
.runner__leccion h3{margin:0 0 6px;font-size:21px}
.runner__leccion p{margin:0;font-size:17px;line-height:1.5}
.runner__leccion[hidden]{display:none}
@media(max-width:600px){
  .runner canvas{height:clamp(210px,34dvh,280px)}
  .runner__barra{flex-wrap:wrap}
  .runner__barra button{flex:1}
}