/* ═══════════════════════════════════════════════════════════════════════════ AIMA · assets/aima-movil-2.css — LA DEMO MÓVIL NUEVA · el chasis ─────────────────────────────────────────────────────────────────────────── 26/10/2026 · Bratney: «una adaptación mucho más visual, de menos texto o más desplegable, con más animaciones, partiendo de la estética AIMA; y que cuando quiera sumar información ya tenga las dos versiones listas». QUÉ ES. La segunda generación de la versión de móvil. La primera (aima-app-movil.js) tapaba la página con una pantalla negra y su propio texto, escrito aparte: cada dato vivía dos veces y el del móvil se quedaba viejo (en Desarrolladores seguía diciendo «12 funciones» y «Plan Hobby»). Esta no escribe nada: coge LA MISMA página de ordenador y la vuelve a montar para el pulgar. Si mañana se añade una ficha, una regla o una entrada del laboratorio en el HTML de siempre, el móvil la enseña sola. CÓMO SE ENGANCHA (en cada página que la estrene): 1 · 2 · el lector de vista de la cabeza pone html.m2 cuando la vista es la de móvil (≤ 600 px y dedo, la regla de siempre de AIMAVista) 3 · esta hoja y la de la página, con media="(max-width:600px), (max-height:600px)" para que en el ordenador no frenen el pintado, y un guion de una línea que, con html.m2, les pone media="all": la página montada para el pulgar no puede quedarse sin su hoja porque el teléfono se gire o el plegable se abra 4 · aima-movil-2.js + assets/movil/nombre.js, inyectados solo con m2 TODO va bajo `html.m2`: sin esa clase, esta hoja no toca nada. LA ESTÉTICA: la de Packs (skill estilo-aima). Blanco de fondo; Anton en mayúsculas para el titular, Cormorant de complemento, Montserrat para leer y pulsar; un solo rojo, de acento; marcadores con el cuadrado imperfecto; iconos sin rojo. EL RENDIMIENTO, primero: nada de backdrop-filter (fue el lag del portafolio el 21/10), solo se anima transform y opacity, y los bucles corren únicamente mientras se ven (--m2-juega). ═══════════════════════════════════════════════════════════════════════════ */ /* ── 0 · LAS FICHAS DE DISEÑO ─────────────────────────────────────────────── */ html.m2{ --m2-tinta:#0B0B0D; --m2-t1:#2A2A2E; --m2-t2:#56565C; --m2-t3:#6B6B70; /* t3 más oscuro que en escritorio: 4,9:1 sobre blanco y 4,5:1 sobre hueso, letra pequeña en pantalla pequeña */ --m2-papel:#FFFFFF; --m2-hueso:#F2F2F0; --m2-hueso-2:#E9E9E5; --m2-filete:#E2E2DE; --m2-filete-2:#EDEDEA; --m2-trazo:#C9C9C4; --m2-rojo:#C1272D; --m2-rojo-claro:#EC5A60; --m2-rojo-velo:#F8E9E9; --m2-f-anton:'Anton','AIMA Anton',Impact,'Arial Narrow',sans-serif; --m2-f-corm:'Cormorant Garamond','AIMA Cormorant',Garamond,'Times New Roman',serif; --m2-f-mont:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; --m2-f-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace; --m2-ease:cubic-bezier(.22,1,.36,1); --m2-rebote:cubic-bezier(.34,1.56,.64,1); --m2-facet:polygon(10% 16%,92% 0%,100% 55%,96% 92%,0% 96%); --m2-lado:18px; /* margen lateral de todo */ --m2-riel:46px; /* alto de la barra de capítulos */ --head-h:56px; /* la cabecera de la casa, más baja en móvil */ --cabecera:56px; /* lo que queda tapado arriba: cabecera + barra de capítulos. Se cuenta la cabecera aunque esté apartada, porque vuelve en cuanto se sube un poco (el tabulador hacia atrás sube) y lo enfocado no puede quedar debajo. */ scroll-padding-top:calc(var(--head-h) + var(--m2-riel) + 14px); scroll-padding-bottom:24px; -webkit-text-size-adjust:100%; background:var(--m2-papel); } /* 🔴 Nada de variables que cambien con html.m2-sube (la cabecera que se va y vuelve) ni con otra clase de que cambie con el scroll: una variable que cambia en la heredan TODOS los elementos y el navegador recalcula la página entera (7.500 elementos, 40 ms en un ordenador, el triple en un móvil) cada vez que la cabecera se aparta. Lo que dependa de la cabecera va en su propia regla html.m2.m2-sube , que solo toca a ese. */ /* Los bucles (planos, luces, pulsos) leen esto: parados fuera de la vista. */ html.m2 .m2-vivo{--m2-juega:running} /* ── 1 · LA BASE ───────────────────────────────────────────────────────────── */ html.m2 body{ background:var(--m2-papel);color:var(--m2-t1); font:400 15px/1.62 var(--m2-f-mont); overflow-x:clip;-webkit-tap-highlight-color:transparent; } /* clip y no hidden: hidden convierte al en caja con scroll propio y entonces nada «pegajoso» (la pila de reglas) se pega a la pantalla. */ html.m2 main{container-type:inline-size;padding-top:var(--head-h)} html.m2.m2-con-riel main{padding-top:calc(var(--head-h) + var(--m2-riel))} /* el hueco de la barra, cuando la hay */ html.m2 .caja{width:auto;margin-inline:var(--m2-lado)} html.m2 .seccion{padding-block:58px 66px} html.m2 :focus-visible{outline:2px solid var(--m2-tinta);outline-offset:3px} /* un capítulo al que se llega por la barra recibe el foco (para que el tabulador siga desde allí), pero no se le pinta el anillo: no se pulsa */ html.m2 [tabindex="-1"]:focus{outline:none} html.m2 button{-webkit-tap-highlight-color:transparent} /* lo que solo es para el lector de pantalla (la cifra de verdad de un contador) */ html.m2 .m2-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important; overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important} /* El revelado de escritorio (data-revela) no manda aquí: lo hace .m2-r */ html.m2.js [data-revela]{opacity:1;transform:none;transition:none} /* El telón de la web, corto y en claro (en la app vieja era negro) */ html.m2 #boot{background:var(--m2-papel)!important;transition:opacity .45s var(--m2-ease),visibility .45s!important} html.m2 #boot img{display:block!important} /* ── 2 · LA CABECERA: sólida, más baja, se va al bajar y vuelve al subir ── */ html.m2 .site-head{transition:transform .38s var(--m2-ease);will-change:transform} html.m2 .brandbar{height:var(--head-h);background:var(--m2-papel)!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important} html.m2 .brandbar-in{padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))} html.m2 .brandbar .social{display:none} /* el pulgar necesita 44 px: el menú y la cuenta crecen (el dibujo, no) */ html.m2 .menu-btn{width:44px!important;height:44px!important} html.m2 .brandbar-in .aima-yo{width:44px!important;height:44px!important} html.m2 .brand svg.mark{width:23px;height:31px} html.m2 .brand svg.word{width:66px;height:20px} html.m2.m2-sube .site-head{transform:translateY(-100%)} /* el menú a pantalla completa, sin desenfoque (es lo que más pesa en un móvil) */ html.m2 #mmenu{background:var(--m2-papel)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important} html.m2 .mmenu-close{top:9px!important;right:10px!important} /* ── 3 · LA BARRA DE CAPÍTULOS ───────────────────────────────────────────── La monta aima-movil-2.js con el sumario de la propia página (el mismo