/* ============================================================ MinerOS Hub · SISTEMA — FUENTE ÚNICA DE VERDAD ------------------------------------------------------------ Creado en la Fase 1 de la auditoría visual (septiembre 2026). POR QUÉ EXISTE La auditoría midió 34 hojas, 363 media queries y 39 valores de corte distintos. El diagnóstico inicial dijo "fusionar las hojas responsive". Medido en detalle, eso era falso: mobile-system.css 26 cortes canónicos · 0 fuera desktop-compact.css 5 canónicos · 1 (documentada) responsive.css 30 canónicos · 8 componentes 9 canónicos · 231 fuera Las hojas responsive son la parte disciplinada del sistema y fusionarlas destruiría la garantía de frontera que declara `mobile-system.css`. Los 231 cortes de los componentes son decisiones internas legítimas: una rejilla de tarjetas no quiere cambiar en el mismo ancho que la barra de navegación. Lo que faltaba de verdad era ESTO: un sitio donde los tramos y las escalas estén DECLARADOS, en vez de deducirse de cinco hojas y cuatro scripts. Este archivo no cambia comportamiento salvo donde lo dice explícitamente. ------------------------------------------------------------ TRAMOS CANÓNICOS — los únicos cuatro del sistema ≤ 767 móvil → mobile-system.css 768 – 1023 tablet → mobile-system.css 1024 – 1279 escritorio compacto → desktop-compact.css ≥ 1280 escritorio amplio → sin hoja propia El umbral de navegación es 1024. Vive también en responsive.css, redesign.css, styles.css, nav-menu.css, mobile-system.css, core.js, kc.js, asic-cards.js y tienda-shop.js. Si cambia, cambia en todos: a medias crea una franja con las dos navegaciones. ORDEN DE CARGA Esta hoja va DESPUÉS de polish.css (última del documento) y ANTES de mobile-system.css y desktop-compact.css, que core.js inyecta. Por eso todo lo que hay aquí se limita a ≥1024 y nunca puede chocar con la capa táctil. ============================================================ */ :root{ /* --- escala de contenedor (medida, no inventada) --- Valores reales del contenedor de contenido tras la auditoría. Se declaran aquí para que se lean de un sitio; las reglas que los aplican siguen en sus hojas de tramo. */ --sys-pad-mobile:16px; /* ≤767 · responsive.css */ --sys-pad-tablet:28px; /* 768–1023 · mobile-system.css */ --sys-pad-compact:26px; /* 1024–1279 · desktop-compact.css */ --sys-pad-wide:24px; /* ≥1280 · styles.css */ --sys-maxw:1200px; /* columna de contenido, styles.css --maxw */ /* --- escala tipográfica de escritorio --- La auditoría midió el H1 a 57,6px y el H2 a 49,6px: ratio 1,16. En móvil el mismo par da 1,33. El título de sección competía de tú a tú con el de página y ninguno mandaba. El H1 no se toca — es la identidad de la página. Baja el H2. */ --sys-h1-wide:3.6rem; /* 57,6px · sin cambio */ --sys-h2-wide:2.6rem; /* 41,6px · antes 3,1rem / 49,6px */ } /* ============================================================ T‑1 · JERARQUÍA TIPOGRÁFICA EN ESCRITORIO ------------------------------------------------------------ Solo ≥1024. La capa táctil define su propia escala con las variables --ms-* y este bloque no la alcanza. El H1 deja de crecer en 1066px, donde su clamp toca el techo de 3,6rem. Por eso el H2 tiene que aplanarse casi a la vez: con una curva más larga el ratio se disparaba a 1,50 en 1280 — medido. La cota inferior es 2,5rem y no un valor en vw porque a 1024 un 3,9vw sin suelo dejaba el H2 por debajo del H3. Antes Ahora 1440 → 57,6 / 49,6 = 1,16 1440 → 57,6 / 41,6 = 1,38 1280 → 57,6 / 49,6 = 1,16 1280 → 57,6 / 41,6 = 1,38 1024 → 55,3 / 47,1 = 1,17 1024 → 55,3 / 39,9 = 1,39 Táctil, sin tocar (capa --ms-*) 768 → 38,4 / 28,0 = 1,37 390 → 28,0 / 21,1 = 1,33 ============================================================ */ @media (min-width:1024px){ .sec-title{font-size:clamp(2.5rem,3.9vw,var(--sys-h2-wide))} } /* ============================================================ BLOQUE 4 · ESTRUCTURA DE ENCABEZADOS ------------------------------------------------------------ Las fichas `.crow` (firmware, energías, hosting, oportunidades) titulaban con H4 mientras la página iba de H1 a H4 sin pasar por H2 ni H3. Energías era el caso extremo: un H1 y ningún otro encabezado en todo el documento. Ahora cada sección tiene su H2 y la ficha titula en H3. El aspecto no cambia: se replica aquí la regla que `redesign.css` tenía para el H4, con la misma medida y el mismo peso. Sin media query a propósito: es estructura, no densidad. La capa táctil ya reduce los H3 con `--ms-h3`, y esta regla lleva dos clases más un tipo, así que manda sobre ella igual que hacía la del H4. ============================================================ */ .crow .cmain h3{font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:-.01em;margin:0} /* ============================================================ ALTURA DE LA CABECERA · --nav-h ------------------------------------------------------------ Un solo numero para todo el proyecto. Lo consumen las barras que se pegan por debajo de la cabecera: `.suite-bar` de la calculadora y `.ms-tabs` de la capa tactil. Existe porque el mismo fallo aparecio dos veces: una barra pegada con un `top` a ojo queda por debajo del borde de la cabecera, que lleva `z-index:100`, y los primeros pixeles de cada pestana se pierden bajo ella. En `.suite-bar` eran 13px con `top:56px`. ESTOS VALORES SON SOLO LA RESERVA. `mobile-ui.js` mide la cabecera real al cargar y sobrescribe el token, porque su altura NO es la misma en todas las paginas: medido, 69px en calculadora y 75px en la home con los mismos hijos de 44px. Cualquier numero escrito a mano acierta en unas paginas y falla en otras. ============================================================ */ :root{--nav-h:69px} @media (min-width:1024px){:root{--nav-h:65px}} /* ============================================================ T‑2 · UNA SOLA MEDIDA PARA CADA FAMILIA DE ETIQUETA ------------------------------------------------------------ La auditoría no encontró "texto pequeño": encontró SEIS medidas distintas para lo mismo. Todas son mono en versalitas con tracking ancho, todas hacen el mismo trabajo, y ninguna sabía de las otras: .secnav-lbl 9,9px (secnav.js) .tk-eye 9,9px (redesign.css) .fw .ftag / .crow 9,9–10,2px .eyebrow 11,5px (styles.css) .crow .cmeta chips 10,9px .fw .chips span 11,2px No se sube un suelo: se unifican en dos medidas, una por familia. El antetítulo (.eyebrow, 11,5px) ya era la más grande y la mejor calibrada, así que manda: las demás etiquetas suben hasta ella. Las cápsulas de dato son otra familia —caja, borde, texto mixto— y se unifican un paso por encima, en 12px. Solo ≥1024. Por debajo manda la capa táctil, que ya tiene su propio suelo de 13px con una lista ganada a base de medir y que esta hoja no debe pisar. Especificidad: `.secnav .secnav-lbl` lleva dos clases a propósito. `secnav.js` inyecta su hoja por JavaScript DESPUÉS de esta, así que con una sola clase ganaría siempre la suya. ============================================================ */ @media (min-width:1024px){ /* familia 1 · antetítulos y etiquetas: 11,5px La segunda pasada de medición encontró cuatro más por debajo de 11px en escritorio, con su medida entre paréntesis. Todas llevan dos clases porque tres de ellas nacen en hojas que `secnav.js`, `risk.js` y `fw-advisor.js` inyectan DESPUÉS de esta. */ .secnav .secnav-lbl, /* 9,9 */ .inv-ticker .tk-eye, /* 9,9 */ .fw .ftag,.crow .ftag,.fwd-intro .ftag, /* 9,9–10,2 */ .nav-drop .nav-sec, /* 9,6 */ .mos-risk-bar .mos-risk-eye, /* 9,9 */ .fwa-box .fwa-rec-eye,.fwa-box .fwa-why-h{ /* 10,2 / 9,9 */ font-size:.72rem} /* familia 2 · cápsulas de dato: 12px `.crow .cmeta.chips span` se queda fuera en táctil (ver la nota en mobile-system.css: la fila ya desborda a 390), pero en escritorio hay ancho de sobra y entra sin riesgo. */ .fw .chips span,.crow .cmeta.chips span{font-size:.75rem} }