/* dejuego.com · Aprende matemáticas — paleta propia: azul, celeste y turquesa */
:root{
  --m-azul:#1e40af; --m-azul-2:#2563eb; --m-celeste:#0ea5e9; --m-turq:#14b8a6; --m-aqua:#22d3ee; --m-hielo:#ecfeff;
  --m-tinta:#0f2a4a; --m-suave:#3f5a7a; --m-borde:#bfe3f2; --m-sombra:0 8px 0 rgba(14,74,120,.16), 0 22px 40px -22px rgba(12,74,110,.55);
  --m-e56:#0d9488; --m-e79:#2563eb; --m-e1012:#6d28d9;
}
.m-defs{position:absolute;width:0;height:0;overflow:hidden}
body.s-sitio{background:linear-gradient(180deg,#1e3a8a 0,#1d4ed8 160px,#0ea5e9 380px,#22d3ee 600px,#a5f3fc 820px,#ecfeff 1050px,#f0fdff 100%);background-attachment:scroll;color:var(--m-tinta)}

/* ---------- encabezado ---------- */
.m-cab{max-width:1180px;margin:0 auto;padding:10px 18px 4px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;color:#fff}
.m-cab h1{font-size:clamp(2rem,7vw,3.6rem);font-weight:800;text-shadow:0 4px 0 rgba(15,42,74,.35)}
.m-cab h1 em{font-style:normal;color:#67e8f9;background:linear-gradient(180deg,#a5f3fc,#5eead4);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(15,42,74,.35))}
.m-cab p{font-weight:800;font-size:clamp(1rem,2.6vw,1.2rem);max-width:560px;margin-top:6px;color:#e0f7ff}
.m-cab-arte{position:relative;width:clamp(120px,24vw,210px);aspect-ratio:1/1;perspective:600px}
.m-kiko{position:absolute;left:18%;bottom:0;width:64%;filter:drop-shadow(0 12px 10px rgba(0,0,0,.25));animation:mFlota 4s ease-in-out infinite}
.m-cubo{--l:clamp(34px,7vw,64px);position:absolute;right:4%;top:6%;width:var(--l);height:var(--l);transform-style:preserve-3d;animation:mGira 9s linear infinite}
.m-cubo i{position:absolute;inset:0;border-radius:6px;background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(103,232,249,.55));border:2px solid rgba(255,255,255,.9);box-shadow:inset 0 0 12px rgba(14,116,144,.35)}
.m-cubo i:nth-child(1){transform:translateZ(calc(var(--l,36px)/2))}
.m-cubo i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--l,36px)/2))}
.m-cubo i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--l,36px)/2))}
.m-cubo i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--l,36px)/2))}
.m-cubo i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--l,36px)/2))}
.m-cubo i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--l,36px)/2))}
.m-burb{position:absolute;display:grid;place-items:center;width:30%;aspect-ratio:1/1;border-radius:50%;font-family:var(--titulo);font-weight:800;font-size:clamp(1rem,3vw,1.6rem);color:#0369a1;background:radial-gradient(circle at 35% 30%,#fff,#e0f2fe 60%,#7dd3fc);box-shadow:0 6px 0 rgba(3,105,161,.35);animation:mFlota 5s ease-in-out infinite}
.m-burb.b1{left:-4%;top:6%}.m-burb.b2{left:-8%;top:52%;width:24%;animation-delay:-1.2s}.m-burb.b3{right:-6%;top:48%;width:24%;animation-delay:-2.4s}.m-burb.b4{right:30%;top:-10%;width:22%;animation-delay:-3.1s}
@keyframes mFlota{50%{transform:translateY(-10px)}}
@keyframes mGira{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}

/* ---------- filtros: edades y temas (deslizables, sin romper a 2 líneas) ---------- */
.m-main{max-width:1180px;margin:0 auto;padding:6px 18px 40px}
.m-filtros{display:grid;gap:10px;margin:10px 0 16px}
.m-fila{display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap;padding:4px 2px 12px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.m-fila::-webkit-scrollbar{display:none}
.m-chip{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:8px 16px;border-radius:999px;background:linear-gradient(180deg,#fff,#e8f7fd);color:var(--m-tinta);font-family:var(--titulo);font-weight:800;font-size:1.05rem;white-space:nowrap;box-shadow:0 5px 0 rgba(14,74,120,.25);transition:transform .12s,box-shadow .12s}
.m-chip .ic{width:26px;height:26px}
.m-chip small{font-family:var(--texto);font-weight:900;font-size:.78rem;opacity:.8}
.m-chip:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(14,74,120,.25)}
.m-chip[aria-pressed="true"],.m-chip[aria-selected="true"]{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0)) ,var(--c,#0284c7);color:#fff;box-shadow:0 5px 0 rgba(15,42,74,.4)}
.m-edad-et{color:#fff;font-weight:900;align-self:center;flex:0 0 auto;font-size:.95rem;text-shadow:0 2px 0 rgba(15,42,74,.3)}
.m-temas .m-chip{font-size:1.12rem;padding:8px 18px 8px 10px;min-height:52px}
.m-temas .m-chip .ic{width:32px;height:32px}

/* ---------- panel del tema ---------- */
.m-tema-cab{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--c),var(--c2,#22d3ee));color:#fff;border-radius:28px;padding:16px 20px;box-shadow:0 8px 0 rgba(15,42,74,.25),0 22px 40px -22px rgba(15,42,74,.6),inset 0 2px 0 rgba(255,255,255,.35);position:relative;overflow:hidden;margin-bottom:16px}
.m-tema-cab:before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,0) 45%);pointer-events:none}
.m-tema-cab > img{width:64px;height:64px;flex:0 0 64px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.m-tema-cab h2{font-size:clamp(1.6rem,5vw,2.4rem)}
.m-tema-cab p{font-weight:800;opacity:.95;line-height:1.3}
.m-lecciones{display:grid;gap:14px}
.m-vacio{background:#fff;border-radius:24px;padding:18px;font-weight:800;text-align:center;box-shadow:var(--m-sombra)}

.m-enlace{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 14px;border-radius:999px;background:#fff;color:#1e3a8a;font-weight:900;text-decoration:none;box-shadow:0 4px 0 rgba(15,42,74,.3);position:relative}
.m-enlace .ic{width:24px;height:24px}
/* ---------- lección ---------- */
.m-lec{background:#fff;border-radius:26px;box-shadow:var(--m-sombra);border:3px solid rgba(255,255,255,.95);overflow:hidden;scroll-margin-top:90px}
.m-lec-cab{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;text-align:left;background:linear-gradient(180deg,#fff,#f2fbff)}
.m-lec-cab .n{flex:0 0 42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--titulo);font-weight:800;font-size:1.25rem;color:#fff;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 50%),var(--c,#0284c7);box-shadow:0 4px 0 rgba(15,42,74,.25)}
.m-lec-cab .t{flex:1;min-width:0}
.m-lec-cab h3{font-size:clamp(1.12rem,3.6vw,1.45rem);overflow-wrap:anywhere}
.m-lec-cab .sub{display:block;font-weight:800;color:var(--m-suave);font-size:.9rem;line-height:1.25;margin-top:2px}
.m-edad{display:inline-block;font-weight:900;font-size:.78rem;padding:3px 9px;border-radius:999px;color:#fff;white-space:nowrap;vertical-align:2px}
.m-edad.e56{background:var(--m-e56)}.m-edad.e79{background:var(--m-e79)}.m-edad.e1012{background:var(--m-e1012)}
.m-lec-cab .abre{flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#e0f2fe;color:#0369a1;font-weight:900;font-size:1.2rem;transition:transform .25s}
.m-lec-cab[aria-expanded="true"] .abre{transform:rotate(180deg)}
.m-hecha{display:inline-flex;align-items:center;gap:3px;font-weight:900;font-size:.78rem;color:#047857;background:#d1fae5;border-radius:999px;padding:2px 8px;margin-left:4px;vertical-align:2px}
.m-hecha .ic{width:16px;height:16px}
.m-lec-cuerpo{padding:4px 16px 18px;display:grid;gap:14px;animation:mAbre .3s ease-out}
@keyframes mAbre{from{opacity:0;transform:translateY(-6px)}}
.m-explica{display:flex;gap:10px;align-items:flex-start;background:#f0f9ff;border-radius:18px;padding:12px 14px}
.m-explica p{flex:1;min-width:0;font-weight:700;font-size:1.06rem;line-height:1.45}
.m-explica b{color:#0369a1}
.m-oir{flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#fff,#e0f2fe);box-shadow:0 4px 0 var(--m-borde)}
.m-oir .ic{width:26px;height:26px}

/* zona visual */
.m-visual{background:radial-gradient(120% 90% at 50% 0,#ffffff 0,#e9f8ff 70%);border-radius:22px;padding:12px;box-shadow:inset 0 0 0 2px #d6effa;display:grid;gap:10px;min-width:0}
.m-visual svg{width:100%;height:auto;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.m-visual svg text{font-family:var(--titulo);font-weight:800}
.m-msg{font-weight:800;font-size:1.05rem;text-align:center;min-height:1.5em;line-height:1.35;color:var(--m-tinta)}
.m-msg .eq,.m-eq{font-family:var(--titulo);font-weight:800;font-size:1.35em;color:#0369a1}
.m-ctrl{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:8px 18px;border-radius:999px;font-family:var(--titulo);font-weight:800;font-size:1.05rem;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 60%),#0284c7;box-shadow:0 5px 0 #075985;transition:transform .12s,box-shadow .12s;text-shadow:0 2px 0 rgba(0,0,0,.15);max-width:100%}
.m-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #075985}
.m-btn.turq{background-color:#0d9488;box-shadow:0 5px 0 #115e59}.m-btn.turq:active{box-shadow:0 1px 0 #115e59}
.m-btn.blanco{background:linear-gradient(180deg,#fff,#eef8fc);color:var(--m-tinta);box-shadow:0 5px 0 var(--m-borde);text-shadow:none}
.m-btn[disabled]{opacity:.45;pointer-events:none}
.m-visual.m-ocupada .m-ctrl button,.m-visual.m-ocupada .m-seg button{pointer-events:none;opacity:.55}
.m-paso{display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:4px;box-shadow:0 4px 0 var(--m-borde)}
.m-paso button{width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,#e0f2fe,#bae6fd);font-family:var(--titulo);font-weight:800;font-size:1.5rem;color:#075985;box-shadow:0 3px 0 #7dd3fc}
.m-paso button:active{transform:translateY(3px);box-shadow:none}
.m-paso span{min-width:2.6em;text-align:center;font-family:var(--titulo);font-weight:800;font-size:1.2rem}
.m-paso label{font-weight:900;font-size:.9rem;padding-left:10px;color:var(--m-suave)}
.m-seg{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.m-seg button{min-height:44px;padding:6px 14px;border-radius:999px;background:#fff;font-weight:900;box-shadow:0 4px 0 var(--m-borde);color:var(--m-tinta)}
.m-seg button[aria-pressed="true"]{background:#0e7490;color:#fff;box-shadow:0 4px 0 #164e63}

/* columnas (suma y resta) */
.m-col{display:grid;justify-content:center;font-family:var(--titulo);font-weight:800;font-size:clamp(1.6rem,7vw,2.6rem);line-height:1;row-gap:2px}
.m-col .c{width:1.25em;height:1.35em;display:grid;place-items:center;border-radius:10px;position:relative;transition:background .25s}
.m-col .c.pt{width:.45em}
.m-col .c.lleva{font-size:.5em;height:1.5em;color:#db2777;align-self:end}
.m-col .c.lleva b{background:#fce7f3;border-radius:8px;padding:0 .25em;animation:mPop .4s}
.m-col .c.cero{color:#94a3b8}
.m-col .c.on{background:#fef9c3}
.m-col .c.res{color:#0d9488}
.m-col .c.res b{animation:mPop .4s}
.m-col .c.tach{color:#94a3b8}
.m-col .c.tach:after{content:"";position:absolute;left:12%;right:12%;top:50%;height:3px;background:#db2777;transform:rotate(-20deg);border-radius:2px}
.m-col .c .arriba{position:absolute;top:-.55em;left:50%;transform:translateX(-50%);font-size:.5em;color:#db2777;background:#fce7f3;border-radius:6px;padding:0 .2em;animation:mPop .4s}
.m-col .linea{grid-column:1/-1;height:4px;background:var(--m-tinta);border-radius:2px;margin:2px 0}
.m-col .nom{font-family:var(--texto);font-size:.4em;font-weight:900;color:var(--m-suave);height:1.6em;display:grid;place-items:center;text-transform:uppercase;letter-spacing:.02em}
@keyframes mPop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.2)}100%{transform:none;opacity:1}}

.m-expr{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:8px 0}
.m-tk{display:grid;place-items:center;min-width:1.6em;height:1.7em;padding:0 .2em;border-radius:12px;font-family:var(--titulo);font-weight:800;font-size:clamp(1.4rem,6vw,2.1rem);background:#fff;box-shadow:0 4px 0 var(--m-borde);color:var(--m-tinta)}
.m-tk.op{color:#0369a1;background:#f0f9ff}
.m-tk.on{background:#fef08a;box-shadow:0 4px 0 #eab308;animation:mPop .35s}
/* ---------- ¡Pruébalo! ---------- */
.m-prueba{border-radius:22px;padding:14px;background:linear-gradient(180deg,#ecfeff,#e0f2fe);box-shadow:inset 0 0 0 2px #bae6fd}
.m-prueba-cab{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap}
.m-prueba h4{font-family:var(--titulo);font-size:1.45rem;color:#0e7490;display:flex;align-items:center;gap:6px}
.m-prueba h4 .ic{width:30px;height:30px}
.m-puntos{display:flex;gap:6px}
.m-puntos i{width:14px;height:14px;border-radius:50%;background:#cbd5e1;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);transition:background .3s,transform .3s}
.m-puntos i.ya{background:#14b8a6}.m-puntos i.ahora{background:#0ea5e9;transform:scale(1.3)}
.m-q{font-weight:800;font-size:1.15rem;line-height:1.4;text-align:center;margin:6px 0 10px;overflow-wrap:anywhere}
.m-q .eq{font-family:var(--titulo);font-size:1.45em;color:#0f2a4a;white-space:nowrap}
.m-fig{max-width:460px;margin:0 auto 10px;background:#fff;border-radius:18px;padding:8px;box-shadow:0 4px 0 #cfeaf7}
.m-fig svg{width:100%;height:auto}
.m-fig svg text{font-family:var(--titulo);font-weight:800}
.m-ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,112px),1fr));gap:10px;max-width:620px;margin:0 auto}
.m-op{min-height:58px;border-radius:18px;padding:8px 10px;background:linear-gradient(180deg,#fff,#f1f9fd);box-shadow:0 6px 0 #b6dcee;font-family:var(--titulo);font-weight:800;font-size:clamp(1.15rem,4.4vw,1.5rem);color:var(--m-tinta);border:2px solid #fff;transition:transform .12s,box-shadow .12s,background .2s;display:grid;place-items:center;line-height:1.15;overflow-wrap:anywhere}
.m-op svg{width:min(100%,110px);height:auto}
.m-op svg.ancho{width:100%}
.m-op:active{transform:translateY(4px);box-shadow:0 2px 0 #b6dcee}
.m-op.bien{background:#bbf7d0;box-shadow:0 6px 0 #6ee7b7;animation:pop .35s}
.m-op.mal{background:#fecdd3;box-shadow:0 6px 0 #fda4af;animation:tiembla .35s}
.m-op[disabled]{cursor:default}
.m-num{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.m-num input{width:min(100%,180px);min-height:56px;border-radius:18px;border:3px solid #7dd3fc;font-family:var(--titulo);font-weight:800;font-size:1.6rem;text-align:center;outline:none;background:#fff;color:var(--m-tinta)}
.m-num input:focus{border-color:#0284c7;box-shadow:0 0 0 4px rgba(14,165,233,.25)}
.m-num input.mal{border-color:#f43f5e;animation:tiembla .35s}.m-num input.bien{border-color:#10b981;background:#ecfdf5}
.m-pista{margin-top:10px;font-weight:800;line-height:1.35;border-radius:16px;padding:10px 12px;text-align:center}
.m-pista:empty{display:none}
.m-pista.mal{background:#fff1f2;color:#9f1239}
.m-pista.bien{background:#ecfdf5;color:#065f46}
.m-fin{text-align:center;display:grid;gap:10px;justify-items:center;animation:mAbre .4s}
.m-fin .estrellas{display:flex;gap:6px}.m-fin .estrellas img{width:44px;height:44px}.m-fin .estrellas img.apagada{filter:grayscale(1);opacity:.25}
.m-fin b{font-family:var(--titulo);font-size:1.6rem;color:#0e7490}
.m-fin p{font-weight:800}

/* tip */
.m-tip{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,#fefce8,#fff7ed);border-radius:18px;padding:12px 14px;box-shadow:inset 0 0 0 2px #fde68a}
.m-tip > img{width:40px;height:40px;flex:0 0 40px}
.m-tip b{display:block;font-family:var(--titulo);font-size:1.1rem;color:#92400e}
.m-tip p{font-weight:700;line-height:1.4;color:#5b3a0b}

/* juega para practicar */
.m-juegos{margin-top:18px;background:linear-gradient(135deg,#0e7490,#0284c7);border-radius:28px;padding:16px;color:#fff;box-shadow:0 8px 0 rgba(15,42,74,.3),0 22px 40px -22px rgba(15,42,74,.6)}
.m-juegos h3{font-size:clamp(1.4rem,4.4vw,1.9rem);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.m-juegos h3 .ic{width:36px;height:36px}
.m-juegos-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:12px}
.m-jg{display:block;text-decoration:none;background:#fff;color:var(--m-tinta);border-radius:20px;overflow:hidden;box-shadow:0 6px 0 rgba(15,42,74,.3);transition:transform .15s}
.m-jg:hover{transform:translateY(-3px) rotate(-.4deg)}.m-jg:active{transform:translateY(3px)}
.m-jg .img{aspect-ratio:16/10;background:var(--c,#0ea5e9)}
.m-jg .img img{width:100%;height:100%;object-fit:cover}
.m-jg b{display:block;font-family:var(--titulo);font-size:1.12rem;padding:8px 12px 0}
.m-jg small{display:block;font-weight:800;color:var(--m-suave);padding:0 12px 10px}
.m-jg.tablas .img{display:grid;place-items:center;background:linear-gradient(135deg,#f59e0b,#ef4444)}
.m-jg.tablas .img img{width:44%;height:auto;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.25))}

.m-pie{text-align:center;padding:10px 18px 30px;font-weight:800;color:var(--m-suave)}

.m-moneda{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 5px 0 var(--m-borde);transition:transform .12s}
.m-moneda:active{transform:translateY(4px);box-shadow:0 1px 0 var(--m-borde)}
.m-moneda svg{width:54px;height:54px}
/* ---------- arrastrar ---------- */
.m-arrastra{cursor:grab;touch-action:none}
.m-arrastra.agarrado{cursor:grabbing}

/* ---------- 3D (cuerpos geométricos) ---------- */
.m-canvas3d{width:100%;max-width:420px;aspect-ratio:4/3;margin:0 auto;display:block;touch-action:none;cursor:grab;border-radius:18px;background:radial-gradient(circle at 50% 35%,#fff,#dbf3fd)}
.m-datos3d{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:420px;margin:0 auto;width:100%}
.m-datos3d div{background:#fff;border-radius:16px;padding:8px 4px;text-align:center;box-shadow:0 4px 0 var(--m-borde)}
.m-datos3d b{display:block;font-family:var(--titulo);font-size:1.6rem;color:#0369a1;line-height:1}
.m-datos3d small{font-weight:900;font-size:.8rem;color:var(--m-suave)}

/* ---------- computadora: dos columnas dentro de la lección ---------- */
.m-visual > svg,.m-visual > div > svg,.m-visual .m-col{max-width:560px;margin-left:auto;margin-right:auto}
@media (min-width:1000px){
  .m-lec-cuerpo{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"ex pr" "vis pr" "vis tip";align-items:start;column-gap:18px}
  .m-lec-cuerpo > .m-explica{grid-area:ex}.m-lec-cuerpo > .m-visual{grid-area:vis}.m-lec-cuerpo > .m-prueba{grid-area:pr}.m-lec-cuerpo > .m-tip{grid-area:tip}
}
/* ---------- teléfono y plegables ---------- */
@media (max-width:820px){
  .m-cab{padding-top:4px}
  .m-cab-arte{width:clamp(96px,26vw,150px)}
}
@media (max-width:520px){
  .m-main{padding-left:10px;padding-right:10px}
  .m-cab{padding-left:12px;padding-right:12px;gap:8px}
  .m-lec-cab{padding:10px;gap:9px}
  .m-lec-cab .n{flex-basis:34px;height:34px;font-size:1.05rem}
  .m-lec-cab .abre{flex-basis:30px;height:30px;font-size:1rem}
  .m-lec-cuerpo{padding:2px 10px 14px;gap:12px}
  .m-visual{padding:8px;border-radius:18px}
  .m-prueba{padding:10px}
  .m-explica{padding:10px}
  .m-explica p{font-size:1rem}
  .m-tema-cab{padding:12px 14px;gap:10px;border-radius:22px}
  .m-tema-cab > img{width:46px;height:46px;flex-basis:46px}
  .m-tip{padding:10px;gap:8px}.m-tip > img{width:32px;height:32px;flex-basis:32px}
  .m-btn{font-size:1rem;padding:8px 14px}
}
@media (max-width:360px){
  .m-edad-et{display:none}
  #mEdades .m-chip{padding:7px 11px;min-height:44px}
  .m-cab{grid-template-columns:1fr}
  .m-cab-arte{display:none}
  .m-cab h1{font-size:1.9rem}
  .m-chip{padding:7px 12px;font-size:.98rem}
  .m-temas .m-chip{padding:7px 14px 7px 8px;font-size:1rem}
  .m-temas .m-chip .ic{width:26px;height:26px}
  .m-lec-cab .abre{display:none}
  .m-oir{flex-basis:38px;height:38px}
  .m-q{font-size:1.05rem}
  .m-paso button{width:40px;height:40px}
  .m-paso span{min-width:2.2em}
  .m-paso label{padding-left:6px}
  .m-juegos{padding:12px}
}
@media (prefers-reduced-motion:reduce){.m-cubo,.m-kiko,.m-burb{animation:none}}