/* Duditopia · Zona Aprende en acuarela + lápiz (duditopia_src/ninos/aprende/dudi.css; solo duditopia.com).
   Va después de /ninos/ui.css; /dt/ninos.css (barra compacta, fondo acuarela, k-card/k-btn de papel) va la última.
   Restila la página (portada, materias, mapa, final) y las clases .cql-* que motor.js inyecta, con «body.k» delante
   para ganar a sus estilos. No cambia la lógica: solo papel, marcos a lápiz y la paleta de la marca. */
.c-coral { --c: #e3866b; --c-l: #f6ddd2; --c-d: #a5462f; }
.c-blue { --c: #4f78b0; --c-l: #dfe7ef; --c-d: #2e4f7e; }
.c-mint { --c: #5d8a62; --c-l: #dfe8d6; --c-d: #2f4a3a; }
.c-yellow { --c: #f2b84b; --c-l: #f8ebc8; --c-d: #6b5a2e; }
.c-lila { --c: #8a74b8; --c-l: #ebe4f3; --c-d: #5b4a86; }
.c-sky { --c: #7fb3cf; --c-l: #e2eef4; --c-d: #2e5f78; }
* { box-sizing: border-box; }
html { background: #f3ede0; }
body.k { min-height: 100vh; overflow-x: hidden; --papel: #f8f4ea; --grafito: #3d3550;
  --aro: 0 0 0 1.5px rgba(31,43,37,.62) inset, 2px 2.5px 0 -.4px rgba(31,43,37,.3);
  --marco-s: url(/ninos/super/lapiz/ui/marco-s.webp) 40 48 48 40/20px 24px 24px 20px/0 4px 4px 0 stretch;
  --marco-n: url(/ninos/super/lapiz/ui/marco-n.webp) 40/20px/0 stretch; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 18px 16px 60px; }
[hidden] { display: none !important; }
body.k h2.k-title { margin: 22px 0 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pxi { display: inline-grid; place-items: center; vertical-align: -0.2em; line-height: 0; }
.pxi svg { width: 1.2em; height: 1.2em; }
.lz-e { height: 1.3em; width: auto; vertical-align: -.3em; margin: 0 .04em; }
.lz-i { width: auto; height: 1.4em; vertical-align: middle; }

/* ---------- portada: Dudi + avatar ---------- */
body.k .ap-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 18px; padding: 18px 22px;
  background: var(--papel) url(/dt/grano.webp); }
.ap-dudi { width: 128px; height: 128px; margin: -18px 0 -10px -6px; filter: drop-shadow(0 4px 0 rgba(31,43,37,.08)); }
.ap-hero .hola { min-width: 0; }
.ap-hero .hola b { display: block; font: 650 clamp(23px, 3.4vw, 30px)/1.12 var(--pixel); letter-spacing: -.02em; color: var(--ink);
  background: url(/assets/marcador-amarillo.webp) left 88%/min(100%, 420px) .42em no-repeat; padding-bottom: 2px; }
.ap-hero .hola #yo-txt { display: block; color: var(--soft); font-size: 17px; margin: 6px 0 10px; }
.ap-hero .av { width: 116px; height: 116px; border-radius: 50% 47% 52% 48% / 48% 52% 46% 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(255,251,238,.95) 0 30%, #dfe8d6 64%, #cfdcc4 100%); box-shadow: 0 0 0 1.5px rgba(31,43,37,.45) inset; }
.ap-hero .av svg { width: 110px; height: 110px; }
.coinpill { display: inline-flex; flex: none; white-space: nowrap; align-items: center; gap: 6px; background: #f8ebc8; border-radius: 999px; padding: 6px 14px 6px 8px;
  font: 650 20px/1 var(--pixel); color: #2b2410; box-shadow: var(--aro); }
.coinpill svg { width: 26px; height: 26px; } .coinpill .pxi { vertical-align: 0; }

/* ---------- cursos: mochilas ---------- */
.cursos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
body.k .curso { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px; min-width: 0; cursor: pointer;
  border: 0; border-radius: 6px; background: var(--papel); border-image: var(--marco-s); color: var(--ink); font: inherit; transition: transform .12s; }
.curso .mochila { position: relative; display: block; width: 76px; max-width: 100%; aspect-ratio: 1; }
.curso .mochila img { width: 100%; height: 100%; display: block; }
.curso .mochila b { position: absolute; left: 50%; top: 62.5%; transform: translate(-50%, -50%); font: 700 clamp(14px, 2.2vw, 19px)/1 var(--pixel); color: var(--grafito); }
.curso .cn { font: 650 17px/1.05 var(--pixel); text-align: center; }
.curso small { display: block; font: 500 12.5px/1.3 var(--round); color: var(--soft); }
@media (hover: hover) { body.k .curso:hover { transform: translateY(-2px) rotate(-.6deg); background-color: #fff8e6; } }
body.k .curso:active { transform: translateY(2px); border-image: var(--marco-n); }
body.k .curso[aria-pressed="true"] { background-color: #f2b84b; }
body.k .curso[aria-pressed="true"] .mochila { animation: ap-bote 1.6s ease-in-out infinite; }
@keyframes ap-bote { 50% { transform: translateY(-4px) rotate(-2deg); } }

/* ---------- materias ---------- */
.mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }
body.k .mat { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 0 0 14px; text-align: left; cursor: pointer;
  border: 0; border-radius: 6px; background: var(--papel); border-image: url(/ninos/super/lapiz/ui/marco.webp) 52 64 64 52/26px 32px 32px 26px/0 6px 6px 0 stretch;
  color: var(--ink); font: inherit; transition: transform .12s; overflow: visible; }
.mat .arte { display: grid; place-items: center; height: 170px; margin: 8px 8px 4px; border-radius: 4px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 70% 62% at 50% 58%, rgba(255,251,238,.92), rgba(255,251,238,0) 72%), var(--c-l); }
.mat .arte::before { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background: url(/dt/grano.webp), radial-gradient(ellipse 120% 70% at 50% 118%, var(--c) 0 28%, transparent 62%); }
.mat .arte img { position: relative; width: auto; height: 158px; max-width: 100%; }
.mat .nom { font: 650 24px/1.1 var(--pixel); letter-spacing: -.02em; padding: 4px 16px 0; }
.mat .info { font-size: 15.5px; color: var(--soft); padding: 0 16px; }
.mat .barra { margin: 6px 16px 0; }
.mat .medallas { display: flex; gap: 2px; padding: 4px 14px 0; min-height: 30px; }
.mat .medallas img { width: 28px; height: 28px; }
@media (hover: hover) { body.k .mat:not([disabled]):hover { transform: translateY(-3px) rotate(-.4deg); } body.k .mat:not([disabled]):hover .arte img { animation: ap-bote 1.4s ease-in-out infinite; } }
body.k .mat:active { transform: translateY(2px); }
body.k .mat[disabled] { opacity: .6; cursor: default; }
.barra { display: block; height: 12px; border-radius: 999px; background: #ece4d2; overflow: hidden; box-shadow: 0 0 0 1.3px rgba(31,43,37,.45) inset; }
.barra i { display: block !important; height: 100%; border-radius: 99px; background: repeating-linear-gradient(-55deg, rgba(255,255,255,.28) 0 3px, rgba(255,255,255,0) 3px 7px), var(--c, #5d8a62);
  box-shadow: 0 0 0 1.2px rgba(31,43,37,.35) inset; }

/* ---------- materia: cabecera, vídeos de Dudi, mapa y temas ---------- */
body.k .ap-mcab { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap;
  background: var(--papel) url(/dt/grano.webp); }
.cab-materia { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 320px; }
.cab-materia .ico { flex: none; width: 112px; height: 84px; display: grid; place-items: center; border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,251,238,.95) 0 30%, var(--c-l) 64%, rgba(255,255,255,0) 74%); }
.cab-materia .ico img { width: 108px; height: auto; }
.cab-materia .tt { min-width: 0; }
.cab-materia h2 { margin: 0; font: 650 clamp(24px, 3.6vw, 32px)/1.1 var(--pixel); letter-spacing: -.02em; }
.cab-materia .k-note { margin: 4px 0 0; }
body.k .cab-materia .k-round { flex: none; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(248,244,234,.95); box-shadow: var(--aro); }
body.k .k-round svg { width: 32px; height: 32px; }
.ap-videos { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; text-decoration: none; color: var(--ink);
  background: #f6ddd2; border-radius: 6px; border-image: var(--marco-s); transition: transform .12s; }
.ap-videos img { width: 54px; height: 54px; }
.ap-videos b { display: block; font: 650 18px/1.1 var(--pixel); }
.ap-videos small { display: block; font-size: 13.5px; color: var(--soft); }
.ap-videos:hover { transform: translateY(-2px) rotate(-.5deg); background-color: #f9e6dd; }
.ap-videos:focus-visible { outline: 3px solid var(--mint-d); }

body.k .ap-mapa-card { padding: 6px 4px; background: #f8f4ea url(/dt/grano.webp); }
.ap-mapa { display: flex; align-items: center; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; padding: 14px 18px 14px; scroll-snap-type: x proximity;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  background: url(/assets/linea.webp) repeat-x 0 50%/160px 4px; background-origin: content-box; }
.ap-inicio, .ap-meta { flex: none; display: grid; place-items: center; width: 64px; }
.ap-inicio img, .ap-meta img { width: 58px; height: 58px; }
.ap-meta small { font: 650 14px/1 var(--pixel); color: var(--soft); margin-top: -2px; }
.ap-meta.lleno img { animation: ap-bote 1.6s ease-in-out infinite; }
.parada { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 2px; cursor: pointer;
  font: inherit; color: var(--ink); scroll-snap-align: center; transform: translateY(-14px); }
.parada.abajo { transform: translateY(14px); }
.parada .punto { width: 56px; height: 56px; border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%; display: grid; place-items: center; background: #f8f4ea;
  box-shadow: var(--aro); font: 650 21px/1 var(--pixel); color: var(--soft); transition: transform .12s; }
.parada .punto i { font-style: normal; font-size: 12px; letter-spacing: -1px; color: #c48a12; }
.parada .punto img { width: 46px; height: 46px; }
.parada .nt { font-size: 13px; line-height: 1.15; text-align: center; max-width: 100px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.parada.empezado .punto { background: #f8ebc8; }
.parada.dom .punto { background: #dfe8d6; }
.parada.aqui .punto { background: #f2b84b; color: #2b2410; animation: ap-late 1.5s ease-in-out infinite; }
.parada:hover .punto, .parada:focus-visible .punto { transform: scale(1.08) rotate(-3deg); }
.parada:focus-visible { outline: none; } .parada:focus-visible .nt { text-decoration: underline; }
@keyframes ap-late { 50% { transform: translateY(-3px) scale(1.05); } }

.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
body.k .tema { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; cursor: pointer; border: 0; border-radius: 6px;
  background: var(--papel); border-image: var(--marco-s); font: inherit; color: var(--ink); transition: transform .12s; }
@media (hover: hover) { body.k .tema:hover { transform: translateY(-2px) rotate(-.3deg); background-color: #fff8e6; } }
body.k .tema:active { transform: translateY(2px); border-image: var(--marco-n); }
.tema .b { width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
  background: radial-gradient(circle, rgba(255,251,238,.9) 0 34%, var(--c-l, #e2eef4) 72%); }
.tema .b img { width: 50px; height: 50px; }
.tema .t { flex: 1; min-width: 0; }
.tema .t b { display: block; font: 650 20px/1.12 var(--pixel); letter-spacing: -.01em; margin-bottom: 2px; }
.tema .t span { font-size: 15px; color: var(--soft); }
.tema .lv { color: #c48a12; letter-spacing: 1px; font-size: 16px; }
.tema .lv s { text-decoration: none; color: #d9cfb9; }
body.k .tema.dom { background-color: #e7efdf; }
body.k .tema.mix { background-color: #f8ebc8; }
.tema .barra { margin-top: 6px; }
#s-materia .temas, #s-materia .ap-mapa-card { --c: var(--mcol, #5d8a62); }

/* ---------- sesión ---------- */
.ses-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
body.k .ses-top .k-round { width: 50px; height: 50px; border: 0; border-radius: 50%; background: rgba(248,244,234,.95); box-shadow: var(--aro); }
.ses-top .mt { flex: 1; display: flex; align-items: center; gap: 8px; font: 650 18px/1.15 var(--pixel); color: var(--soft); min-width: 0; }
.ses-top .mt img { width: 52px; height: auto; flex: none; }

/* ---------- final: celebración con Dudi y tu avatar ---------- */
body.k .fin { position: relative; text-align: center; overflow: hidden; background: var(--papel) url(/dt/grano.webp); }
.ap-esc { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; margin: 4px auto 2px; height: 150px; width: min(100%, 340px);
  background: radial-gradient(ellipse 64% 56% at 50% 62%, rgba(255,251,238,.95) 0 34%, #f8ebc8 62%, rgba(248,235,200,0) 76%); }
.ap-dudi-f { width: 140px; height: 140px; animation: ap-salto 1.3s ease-in-out infinite; }
.ap-yo { display: block; width: 124px; height: 134px; margin-left: -8px; animation: ap-salto 1.3s .35s ease-in-out infinite; }
.ap-yo svg { width: 124px; height: 134px; }
@keyframes ap-salto { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px) rotate(-2deg); } 60% { transform: translateY(0) scale(1.03, .97); } }
.fin .big { font: 650 clamp(30px, 6vw, 42px)/1.1 var(--pixel); color: var(--pink-d); letter-spacing: -.02em; margin: 6px 0; }
.fin .stars { display: flex; justify-content: center; gap: 10px; margin: 12px 0; }
.fin .stars svg { width: 70px; height: 70px; }
.fin .stars .off { opacity: .25; filter: grayscale(1); }
.fin .stars > span { animation: ap-pop .6s both; }
.fin .stars > span:nth-child(2) { animation-delay: .25s; } .fin .stars > span:nth-child(3) { animation-delay: .5s; }
@keyframes ap-pop { from { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.2); } }
.fin .datos { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.fin .datos div { display: inline-flex; align-items: center; gap: 8px; background: var(--papel); border-radius: 999px; padding: 7px 15px; font: 650 19px/1.1 var(--pixel); box-shadow: var(--aro); }
.fin .datos svg, .fin .datos img { width: 26px; height: 26px; }
.fin .extra { margin: 8px 0; font-size: 19px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.fin .extra img, .fin .extra svg { width: 34px; height: 34px; }
.fin .extra.premio { background: #f8ebc8; border-radius: 6px; padding: 8px 14px; max-width: 560px; margin: 10px auto; box-shadow: var(--aro); }
.fin .row { justify-content: center; margin-top: 16px; position: relative; }
.ap-confeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ap-confeti i { position: absolute; top: -20px; width: 10px; height: 15px; border-radius: 2px 5px 3px 6px; opacity: .85; animation: ap-cae 2.6s ease-in forwards; transform: rotate(var(--r)); }
@keyframes ap-cae { to { transform: translateY(560px) rotate(calc(var(--r) + 300deg)); opacity: 0; } }
.vacio { text-align: center; color: var(--soft); }
.pie { text-align: center; margin-top: 26px; color: var(--soft); font-size: 15px; }

/* ---------- ejercicios (clases que inyecta motor.js) ---------- */
body.k .cql-q .txt { font: 600 clamp(21px, 4vw, 28px)/1.28 var(--round); color: var(--ink); }
body.k .cql .cql-say { width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(248,244,234,.95); box-shadow: var(--aro); }
body.k .cql .cql-say svg { width: 32px; height: 32px; }
body.k .cql-say:active { transform: translateY(1px); box-shadow: 0 0 0 1.5px rgba(31,43,37,.62) inset; }
body.k .cql-vis { padding: 4px 0; }
body.k .cql-vis svg { max-width: 100%; height: auto; max-height: 42vh; border-radius: 10px; }
body.k .cql .cql-opt { border: 0; border-radius: 6px; box-shadow: none; border-image: var(--marco-s); font: 650 clamp(21px, 3.8vw, 28px)/1.15 var(--pixel); color: var(--ink); }
body.k .cql-opt:nth-child(4n+1) { background: #f6ddd2; } body.k .cql-opt:nth-child(4n+2) { background: #dfe7ef; }
body.k .cql-opt:nth-child(4n+3) { background: #f8ebc8; } body.k .cql-opt:nth-child(4n+4) { background: #dfe8d6; }
@media (hover: hover) { body.k .cql .cql-opt:not(:disabled):hover { transform: translateY(-2px) rotate(-.4deg); box-shadow: none; filter: brightness(1.03); } }
body.k .cql-opt:active { transform: translateY(2px); box-shadow: none; border-image: var(--marco-n); }
body.k .cql-opt .lz-e { height: 1.6em; }
body.k .cql-opt.mal { background: #ece6d8 !important; color: #7d776a; box-shadow: none; text-decoration: line-through; opacity: .75; }
body.k .cql-opt.bien, body.k .cql-chip.bien, body.k .cql-drop.bien { background: #bcd3ad !important; border-color: #3f6a45; box-shadow: none; }
body.k .cql-ans { border: 2.5px dashed rgba(31,43,37,.55); border-radius: 10px; background: #fffdf6 url(/dt/grano.webp); font-family: var(--pixel); font-weight: 650; }
body.k .cql-ans .cur { background: var(--blue); }
body.k .cql .cql-key { border: 0; border-radius: 6px; box-shadow: none; background: var(--papel); border-image: var(--marco-s); font-family: var(--pixel); font-weight: 650; color: var(--ink); }
body.k .cql-key.fn { background: #f6ddd2; }
body.k .cql-key:active { transform: translateY(2px); box-shadow: none; border-image: var(--marco-n); }
body.k .cql-tray, body.k .cql-row { border: 2.5px dashed rgba(31,43,37,.35); border-radius: 12px; background: rgba(255,251,238,.7) url(/dt/grano.webp); }
body.k .cql-chip { border: 0; border-radius: 6px; box-shadow: none; background: #f8ebc8; border-image: var(--marco-s); font-family: var(--pixel); font-weight: 650; color: var(--ink); }
body.k .cql-chip .lz-e { height: 1.5em; }
body.k .cql-chip.sel { outline: 4px solid #4f78b0; outline-offset: 2px; }
body.k .cql-chip.mal, body.k .cql-drop.mal { background: #f3cfc3 !important; }
body.k .cql-drop { border: 2.5px dashed rgba(31,43,37,.6); border-radius: 10px; background: #fffdf6; }
body.k .cql-drop.hover, body.k .cql-chip.hover { background: #dfe7ef; }
body.k .cql-drop .cql-chip { box-shadow: none; }
body.k .cql-row .cql-chip::before { background: #8a74b8; border: 0; box-shadow: 0 0 0 1.5px rgba(31,43,37,.5) inset; font-family: var(--pixel); }
body.k .cql-pairs .cql-chip[data-n]::after { border: 0; box-shadow: 0 0 0 1.5px rgba(31,43,37,.55) inset; background: #fffdf6; font-family: var(--pixel); }
body.k .cql-pairs .cql-chip.p0 { background: #f6cfc0; } body.k .cql-pairs .cql-chip.p1 { background: #cddcee; } body.k .cql-pairs .cql-chip.p2 { background: #c9dcbc; }
body.k .cql-pairs .cql-chip.p3 { background: #f6dd9e; } body.k .cql-pairs .cql-chip.p4 { background: #dccfee; } body.k .cql-pairs .cql-chip.p5 { background: #f4d2b4; }
body.k .cql-pairs .cql-chip.p6 { background: #c8e2ea; } body.k .cql-pairs .cql-chip.p7 { background: #efcfe0; }
body.k .cql-tools .k-btn { font-size: 19px; padding: 9px 16px; }
body.k .cql-tools .k-btn svg, body.k .cql-tools .k-btn .lz-e { width: auto; height: 26px; vertical-align: -6px; }
body.k .cql-fb:not(:empty) { border: 0; border-radius: 6px; box-shadow: var(--aro); font-weight: 650; color: var(--ink); }
body.k .cql-fb.ok { background: #dfe8d6; } body.k .cql-fb.casi { background: #f8ebc8; } body.k .cql-fb.info { background: #dfe7ef; } body.k .cql-fb.no { background: #f6ddd2; }
body.k .cql-exp { border: 0; border-radius: 6px; background: #fffdf6 url(/dt/grano.webp); box-shadow: none; border-image: url(/ninos/super/lapiz/ui/marco.webp) 52 64 64 52/26px 32px 32px 26px/0 6px 6px 0 stretch; }
body.k .cql-exp h3 { font: 650 23px/1.1 var(--pixel); color: var(--blue-d); }
body.k .cql-exp li::before { border: 0; background: #f2b84b; box-shadow: 0 0 0 1.5px rgba(31,43,37,.55) inset; font-family: var(--pixel); font-weight: 650; line-height: 34px; }
body.k .cql-next { font-size: 24px !important; }
body.k .cql-next .lz-e { height: 1.2em; }
body.k .cql-info { font-size: 17px; }
body.k .cql-tema { font: 650 21px/1.1 var(--pixel); color: var(--ink); }
body.k .cql-nivel { color: #c48a12; }
body.k .cql-coins { display: inline-flex; align-items: center; gap: 6px; background: #f8ebc8; border: 0; box-shadow: var(--aro); font: 650 18px/1 var(--pixel); padding: 4px 12px 4px 6px; }
body.k .cql-coins svg { width: 22px; height: 22px; }
body.k .cql-dots span { border: 0; border-radius: 99px; background: #ece4d2; box-shadow: 0 0 0 1.3px rgba(31,43,37,.45) inset; }
body.k .cql-dots span.hecho { background: #8fb38a; } body.k .cql-dots span.ahora { background: #f2b84b; }
body.k .cql-toast { border: 0; border-radius: 6px; background: var(--papel); box-shadow: none; border-image: var(--marco-s); font: 650 21px/1.2 var(--pixel); color: var(--ink); }
body.k .cql-toast .lz-e { height: 1.4em; }
body.k .cql-ghost { opacity: .92; }

/* ---------- móvil ---------- */
@media (max-width: 720px) {
  .cursos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cursos .curso:nth-child(n+5) { grid-column: auto; }
}
@media (max-width: 560px) {
  body.k .ap-hero { grid-template-columns: auto 1fr; padding: 14px 14px 16px; }
  .ap-dudi { width: 92px; height: 92px; margin: -8px 0 -6px -6px; grid-row: 1; }
  .ap-hero .av { width: 86px; height: 86px; grid-row: 1; grid-column: 2; justify-self: end; }
  .ap-hero .av svg { width: 82px; height: 82px; }
  .ap-hero .hola { grid-column: 1 / -1; }
  .mats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mat .arte { height: 112px; margin: 6px 6px 2px; } .mat .arte img { height: 104px; }
  .mat .nom { font-size: 19px; padding: 2px 10px 0; } .mat .info { font-size: 13.5px; padding: 0 10px; } .mat .barra { margin: 4px 10px 0; } .mat .medallas { padding: 2px 8px 0; }
  .mat .medallas img { width: 22px; height: 22px; }
  .cab-materia .ico { width: 84px; height: 64px; } .cab-materia .ico img { width: 80px; }
  .ap-videos { width: 100%; }
  .parada { width: 88px; } .parada .nt { font-size: 12px; max-width: 86px; }
  .ap-dudi-f { width: 110px; height: 110px; } .ap-yo, .ap-yo svg { width: 100px; height: 108px; }
  .ap-esc { height: 120px; }
  .fin .datos div { font-size: 16px; padding: 6px 12px; }
}
@media (max-width: 380px) { .mats { grid-template-columns: 1fr; } .curso .cn { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) {
  .fin .stars > span, .ap-dudi-f, .ap-yo, .parada.aqui .punto, .curso .mochila, .ap-meta.lleno img { animation: none !important; }
  body.k .mat:hover, body.k .tema:hover { transform: none !important; }
}