/* aprender-movil.css: vista de TELÉFONO de Aprender (16-oct-2026), capa añadida sobre la salida del kit. Conceptos Higgsfield aprobados por Mario: guía B con el héroe de A y el segmentado de C; inicio 1 con la tira de calculadoras y las puertas del 2. Todo vive en @media (max-width:760px); fuera sólo queda lo que necesita el JS para no dejar rastro en escritorio (.apm-ui oculto y .apm-pista transparente). Sin cambiar texto ni orden. */ .apm-pista{display:contents} .ap-diag>.apm-pista>div{background:#fff;border-radius:18px;padding:18px} @media (min-width:761px){.apm-ui{display:none!important}} @media (max-width:760px){ .apm-ui{--m-marino:#172A59;--m-azul:#273C84;--m-celeste:#D9DEE6;--m-lavado:#F2F9FD;--m-tinta:rgba(0,0,0,.89); --m-t2:rgba(0,0,0,.66);font-family:var(--hm-fuente,"Inter","Helvetica Neue",Helvetica,Arial,sans-serif); letter-spacing:.01em;-webkit-tap-highlight-color:transparent;box-sizing:border-box} .apm-ui *,.apm-ui *:before,.apm-ui *:after{box-sizing:border-box} .apm-ui[hidden]{display:none!important} .ap button,.ap a{-webkit-tap-highlight-color:transparent} /* ---------- héroe (A): titular grande, trazo de entrada, render a sangre ---------- */ .ap h1{font-size:clamp(34px,10.4vw,42px);line-height:1.06;letter-spacing:-.022em;font-weight:500;margin:10px 0 20px; text-wrap:balance} .ap h2{letter-spacing:-.015em;text-wrap:balance} .ap-heroe>.ap-fig{margin:0 -16px;border-radius:0} .ap-corta{border-radius:20px} /* Deploy 16 (reauditoría G3): la imagen sube arriba de «Respuesta corta», para que la primera pantalla no sea sólo texto. Sólo con CSS (la hoja va en el , antes de pintar): mismo DOM, mismo orden de lectura para el lector de pantalla y el buscador, sin salto (CLS 0). El
de la cabeza se vuelve «contents» y sus hijos se ordenan. */ .ap-heroe:has(>.ap-fig){display:flex;flex-direction:column;gap:0} .ap-heroe:has(>.ap-fig)>div{display:contents} .ap-heroe:has(>.ap-fig)>div>*{order:4} .ap-heroe:has(>.ap-fig)>div>h1{order:2} .ap-heroe:has(>.ap-fig)>.ap-fig{order:3;margin:0 -16px 20px} .ap-heroe:has(>.ap-fig)>div>.ap-meta{order:5} /* Deploy 16 (reauditoría G4): al bajar, la cabecera sube y la barra de pestañas baja; la de capítulos se queda (es la navegación de la guía) y baja al hueco de las pestañas. Al subir vuelven. Quien decide es el script del sitio: pone .is-oculto a la cabecera al bajar y la quita al subir y arriba del todo (en el teléfono, mobile.css la dejaba siempre visible). Con el foco dentro de una barra, la barra se ve. */ body.apm-con-barra nav.hm-hdr,body.apm-con-barra .am-tabs,body.apm-con-barra .apm-barra{ transition:transform .3s cubic-bezier(.2,.8,.2,1)} /* transform y no «top»: mover «top» de un fijo cuenta como salto de diseño (CLS 0.012 medido a 390 px), transform no. El sitio usa «top» bajo 740 px porque un transform en el