/* ============================================================================ The Scrolling Economy — edicion web. Ruta: THE GLANCE AND THE READ. Generada desde el libro: ver build_web_edition.py. No editar web/. IDEA (G1): twenty pixels is the line between the glance and the read; every element sits on one side of it. El umbral no es un gusto: sale del libro. La figura 4.2 lo enuncia — "the glance is free... the read costs effort, and effort has to be bought with the glance" — y el capitulo 5 cierra con "Design for the Glance. Earn the Read." El censo tipografico de las 85 figuras a su ancho nativo lo confirma como hecho medible: 2.048 nodos de texto, 75,7 % en <=14 px, 14,1 % en >=22 px, CERO nodos en 19 px y CERO en 21 px. Hay un valle limpio, y esta en 20. De ahi sale todo: - claim (prosa) 20 px : evidence (carril, pies, DOI) 15 px = 1,33:1 - dentro de una figura, >=20 px es la capa de vistazo y <20 px la de lectura - ninguna figura por debajo de 1:1 de sus 900 px: o entera, o solo el vistazo --------------------------------------------------------------------------- LA CAPA INTERACTIVA (2026-09-24). Una sola gramatica, seis sitios. IDEA (G1): el vistazo se entrega; la lectura se pide — y la regla vale tambien para la evidencia del libro. R1 LA FIGURA DE DOS CAPAS. Se entrega su capa de vistazo (>=20 px, re-fluida) y la lectura se abre con un control que dice lo que cuesta ("22 more labels"). En TODOS los anchos: antes lo decidia el viewport y la tesis se cumplia por accidente. Significa: el vistazo llega gratis y la lectura hay que pedirla. R2 EL CARRIL DE FUENTES. La evidencia de cada seccion en la columna exterior, con la profundidad marcada en la regla. Significa: se puede ver donde el autor se paro a comprobar. R3 LOS DOS ESTADOS DE "SIN FUENTE". Marco del autor (18 secciones, regla gris) y lista de revision (10, regla en acento). Significa: no todo lo que no tiene fuente es lo mismo, y el libro dice cual es cual. R4 EL CENSO DEL CAPITULO. Antes del capitulo, su forma: una raya por seccion con su profundidad, y la cuenta en palabras. Significa: el aparato no es un apendice, es lo primero que el libro ensena. R5 LAS TRES AUSENCIAS. La figura retirada conserva su sitio y su proporcion, y dentro del marco esta el porque. Significa: retirar algo cuesta lo que costaba tenerlo. R6 LO QUE SE LLEVA UN SCROLL. El capitulo con todo lo demas retirado, y la cuenta al lado. Significa: casi todo lo que el libro dice vive en el registro que el vistazo no alcanza. PRECEDENTES (verificados el 2026-09-24, ver la ficha): eLife, Reviewed Preprints (2022-10 anunciado, obligatorio 2023-01-31): el juicio editorial ENCIMA del articulo, con vocabulario cerrado. El unico de los tres que pone el dispositivo en el punto de lectura. Le costo el Journal Impact Factor en junio de 2025. De ahi sale R4. Distill (Carter y Olah, 2016-2017 a 2021): la etiqueta de estado de revision por articulo, en el INDICE, y enlazada a la evidencia del proceso. No marcaba partes de un articulo: eso no existe todavia, y es el hueco que ocupan R2/R3. Sarah Leo, "Mistakes, we've drawn a few" (medium.economist.com, 2019-03-27): la correccion tiene que caber en el mismo espacio que el original. De ahi R5, al pie de la letra. De los siete graficos, uno lo deja SIN rehacer y lo argumenta: es el momento mas fuerte de la pieza, y es la figura 4.5 aqui. CONSTANTES reticula 66 / 10,6 / 23,4 (del impreso) con el carril SIEMPRE en la columna exterior derecha · umbral 20 px · claim:evidence 1,33:1 · UN solo fondo (paper) · UN solo acento · dos familias · la profundidad de fuente se marca con la regla, nunca con color · el acento dentro del aparato significa UNA cosa: "aqui el libro todavia no se ha comprobado a si mismo" · nada se guarda VARIABLES el color de parte (solo en el eyebrow y en el numero de figura) · el contenido del carril y del censo · que capa ve el lector, por decision suya y solo por decision suya SIN ESTADO. No hay cuentas, no hay backend y no hay localStorage: lo unico que el lector elige (abrir una figura, encender el vistazo del capitulo, responder una pregunta) vive en la pagina y se va al recargar. Se diseno asi a proposito, no por ahorro: el muro del sitio anterior no protegia nada, obligaba a registrarse para leer un libro que su autor quiere que se lea, y convertia el proyecto en algo que hay que mantener. Y lo que se pierde al recargar no le duele a nadie, porque volver al vistazo es exactamente el estado por defecto del libro. --------------------------------------------------------------------------- D84 (2026-09-24). QUE SISTEMA VISTE ESTE OBJETO. (Se redacto como "D57". D57 estaba tomada desde el 15 de septiembre: borrar las paginas viejas del remix. El numero se comprueba contra DECISIONES.md ANTES de escribirlo, no despues.) La edicion web no es una pieza del sitio ni el interior impreso en pantalla: es EL LIBRO, y desde D53 el libro tiene cara propia. Manda la CUBIERTA. - No hereda 13.4 (bloques, Span, costura tomate de 2 px, colores de capitulo, Block cobalt #2F4FD8). El objeto vive en su propio dominio y es hermano del sitio, no una seccion suya; y en un objeto editorial la marca del cliente no es la idea, el tema lo es (D52). Con el Span, la edicion hablaria de Carlos. - Tampoco manda el interior impreso. Su papel y su tinta no eran la identidad del libro: eran el ajuste por defecto de una maqueta de imprenta. Lo que comparte con carlosmurguia.com es disciplina, no fichas: Instrument, campos planos, bordes duros, radio 0, AA, cero degradados. Se parecen como se parecen dos libros de la misma editorial, no como dos paginas del mismo sitio. COLOR cobalto #1F2BD1 (el de la cubierta) · crema #F6EFE3 (la de la cubierta) · tinta #1A1918 · acento #C63A1C. Se retiran los tres colores de parte. CARAS Archivo Black 62 = la cubierta se nombra (libro, parte, capitulo) · Instrument Serif = la estructura de lectura (titulos de seccion) · Instrument Sans = todo lo demas. Las tres ya estan en el libro impreso. 4 archivos, 472 KB: 62 KB MENOS que antes (sale Serif Italic, que no usaba ningun texto de la edicion). CONSTANTES el umbral de 20 px · claim:evidence 1,33:1 · la reticula 66/10,6/23,4 con el carril en la columna exterior · DOS fondos y solo dos, y cada uno significa una capa · el acento significa UNA cosa, "aqui el libro todavia no se ha comprobado a si mismo", y vive SOLO en la lectura (un vistazo no comprueba nada, y por eso en cobalto no hay acento) · el acento de dentro de una figura es de la figura (signal vs message) y sigue siendo tomate: si fuera cobalto, el cobalto significaria dos cosas · la profundidad de fuente se marca con la regla, nunca con color · nada se guarda VARIABLES el cuerpo del titulo de capitulo (lo fija su linea mas larga) · como se parte ese titulo en <=3 lineas · que slice del bucle se ve · que capa ve el lector, por decision suya --------------------------------------------------------------------------- QUE PUEDE MOVERSE Y QUE NO (para Valentina, motion de la edicion, D58) Carlos pidio animaciones despues de oir mi objecion, asi que la objecion cae. Esto no es una lista de gustos: son los sitios donde el movimiento CAMBIA lo que la pieza dice. NUNCA se anima: N1 EL CARRIL (R2). Presente y opaco en el primer fotograma, en su sitio. Una evidencia que entra con retraso dice que la evidencia es un extra. N2 LAS TRES AUSENCIAS (R5). El marco, su proporcion y su marca, desde el fotograma cero. Significan que retirar algo cuesta lo que costaba tenerlo; un hueco que crece o que aparece no cuesta nada. N3 EL CENSO (R4). Completo antes de la primera palabra del capitulo. Las rayas no entran escalonadas: la cuenta es el dato, y una cuenta que se monta sola se lee como un grafico animandose, no como una forma que se ensena. N4 LOS DOS ESTADOS DE "SIN FUENTE" (R3). Su trazo y su color no cambian nunca con el tiempo. N5 EL UMBRAL. Ningun texto cruza los 20 px animandose. Un tamano que cambia convierte el umbral en cuestion de gusto. N6 EL BORDE COBALTO/CREMA. Puede desplazarse; no puede fundirse, degradarse ni llevar un velo encima (D42). N7 EL PRECIO DE LA FIGURA. La ventana de lectura abre a tamano pleno. El coste se dice con palabras ("22 more labels"), no se interpreta con un zoom. N8 EL ESTADO DE VISTAZO (R6) en su CONTENIDO. Lo que queda es lo que el vistazo se lleva; si apareciera por partes, diria que el resto esta escondido y no que no se lo llevo. El FONDO si puede cambiar. SI puede moverse: S1 LA COLUMNA DE LA PORTADA. Es el UNICO momento firma de la edicion y el unico elemento cuyo significado ES el movimiento: al hacer scroll en la portada, la columna corre y nunca llega a un final, lo que significa que el feed no tiene fondo. Uno por sitio, y es este. S2 el cambio de fondo al encender y apagar el vistazo. S3 el borde cobalto/crema al salir de la ventana, como desplazamiento. S4 hover, foco, subrayados, apertura y cierre de la ventana de figura. S5 la aparicion del veredicto de una pregunta: responde a un acto del lector. Reduced motion obligatorio: el estado final, siempre legible, siempre completo. Andres Vega, 2026-09-24. ========================================================================= */ /* D7 — el eje de ancho. La variable trae wdth 75-100 y wght 400-700; el @font-face declaraba font-weight:100 900 (pesos que la fuente no tiene) y NINGUN font-stretch, asi que la web no podia alcanzar la condensada que el impreso si usa. Se declara lo que la fuente realmente tiene. */ @font-face{font-family:'Instrument Sans';src:url('fonts/InstrumentSans-Variable.ttf')format('truetype-variations'); font-weight:400 700;font-stretch:75% 100%;font-display:swap} @font-face{font-family:'Instrument Sans';src:url('fonts/InstrumentSans-Italic-Variable.ttf')format('truetype-variations'); font-weight:400 700;font-stretch:75% 100%;font-style:italic;font-display:swap} @font-face{font-family:'Instrument Serif';src:url('fonts/InstrumentSerif-Regular.ttf')format('truetype');font-display:swap} /* D84 — LA TERCERA FAMILIA ENTRA Y CUESTA MENOS QUE LA QUE SALE. Archivo Black 62 es la cara de la CUBIERTA (D53): portada, lomo, contraportada y OG. La edicion web es el libro, asi que su capa de vistazo se compone con la cara del libro y no con la que ya estaba cargada (P3, E13). No es una familia nueva en el objeto: es la que el objeto ya lleva impresa. Es la instancia estatica del mismo archivo que imprime la cubierta (make_cover_fonts.py, wght 900 / wdth 62), subconjunto a mayusculas, cifras y la puntuacion de los dos idiomas: 8,7 KB. Sale Instrument Serif Italic, 70,8 KB, que NINGUN texto de la edicion usaba (los de la prosa son sans). Saldo: -62,1 KB y el mismo numero de archivos, cuatro, que fija el playbook. El respaldo de Archivo es Instrument Sans, no una fuente del sistema: si el archivo no cargara, la pagina sigue dentro del sistema (G5). */ @font-face{font-family:'Archivo Black62';src:url('fonts/Archivo-Black62.ttf')format('truetype'); font-weight:900;font-display:swap} :root{ /* D3 — UN SOLO FONDO. Habia tres (pagina, mate de la caja, papel de la figura). La figura ya no se apoya en una placa: se abre con una regla de tinta y se cierra con una hairline. Sin placas que escondan un borde. */ /* D84 — EL SISTEMA DEL LIBRO, NO EL DEL SITIO NI EL DEL INTERIOR IMPRESO. El papel pasa de #F4F3EF (el paper del sitio y del interior) a #F6EFE3, que es la crema de la CUBIERTA. Es una diferencia de dos puntos que no se ve sola y que se ve al lado de la portada: dice de que familia es este objeto. El cobalto es el #1F2BD1 de la cubierta, NO el Block cobalt #2F4FD8 del sitio (13.4). Son dos azules distintos a proposito: el sitio es Carlos, el libro es el libro. */ --paper:#F6EFE3; --ink:#1A1918; --ink2:#5A5650; --rule:#DCD9D2; --cobalt:#1F2BD1; --on-cobalt:#F6EFE3; /* 7,90:1 — el par de la cubierta */ /* ==== D88 · EL LADRILLO SE RETIRA DEL SISTEMA (Carlos, 2026-09-24) ======= "y el color ladrillo no deberiamos utilizarlo". #C63A1C hacia TRES trabajos y los tres se reubican, ninguno se pierde: 1. EL FOCO. Era el unico calido que llegaba a 3:1 sobre crema, y esa era toda su razon de ser. Pasa a TINTA con halo de crema: 15,36:1 sobre el papel y, con el halo, visible tambien sobre un relleno oscuro. Sobre el cobalto la banda ya lo invierte. Deja de depender de un color y pasa a depender del contraste, que es lo que pide SC 1.4.11. 2. "AQUI EL LIBRO TODAVIA NO SE HA COMPROBADO" (censo y tramo `revisar`). Pasa al OCRE #8F5E00, que es el mismo que D84-B nombra para la parte 2 y no un color nuevo: 4,88:1 sobre crema. Y deja de depender del color — el trazo de `revisar` pasa a DOBLE, la unica forma que no usaba ninguno de los otros cuatro estados. Antes solo se distinguia de `metodo` por el tono. 3. EL ACENTO DE LAS FIGURAS. Pasa al TOMATE del libro (#FF5A36), que es lo que el interior imprime: contado en los dos PDF, 86 rellenos y 117.000 pt2 frente a 7 spans de texto y cero rellenos del ladrillo. CONSTANTE: el tomate no pinta texto ni hairlines que haya que leer — sobre crema da 2,71:1. Solo rellenos y marcas, con la tinta encima (5,66:1). EL ACIERTO Y EL FALLO. Dos colores claramente distintos y ademas una diferencia que no es de color: --ok verde #19693F 5,86:1 sobre crema --nope ocre #8F5E00 4,88:1 sobre crema Elegidos midiendo: simulando deuteranopia y protanopia la distancia entre los dos se mantiene en 183 y 214 sobre 255, mejor que verde/cobalto (192 / 201) y muy por encima de verde/magenta (44 / 47), que es el par que parece obvio y es justo el que desaparece. El verde entra en el sistema porque el sistema no tenia manera de decir "esto esta bien"; el ocre ya estaba. El cobalto NO se gasta aqui: significa "el libro se nombra", y un acierto no es el libro. Encima del color van la palabra y la forma, macizo contra hueco. */ --accent:#FF5A36; --on-accent:#1A1918; /* el tomate del libro: relleno y marca */ /* ==== D89 · LOS TRES COLORES DE MARCA, Y SUS FAMILIAS ==================== Carlos, 2026-09-24: "tenemos tres colores de marca definidos por el libro". Vuelven los tres y queda revocado el retiro de D84-B. Son los del interior impreso, donde suman 7,7 millones de pt2 de aperturas de parte y son el unico sitio donde el libro es policromo. El azul de parte y el cobalto de la cubierta ya se alinearon en D86: son el mismo azul. UN SISTEMA NO SON TRES HEXES, SON TRES FAMILIAS. El ambar y el rosa dan 1,53:1 y 1,66:1 sobre crema: como CAMPO son perfectos —la tinta encima da 10,01 y 9,23— y como texto o filete fino no valen. Cada familia tiene dos valores y un uso escrito para cada uno: familia CAMPO (con -on encima) TINTA (texto, filete, indicador) cobalto #1F2BD1 crema 7,90 #1F2BD1 sobre crema 7,90 ambar #FFB627 tinta 10,01 #8F5E00 sobre crema 4,88 rosa #F7A6B1 tinta 9,23 #A8203C sobre crema 6,26 Las TINTAS se derivaron bajando la luminosidad del color de marca sin mover su tono hasta cruzar 4,5:1 sobre crema: se reconocen como la misma familia y pasan tambien el 3:1 de indicador. El ambar oscuro no es nuevo: es el #8F5E00 que D84-B ya nombraba para la parte 2. De noche el campo no cambia y la tinta pasa a #8FA0FF / #E0A733 / #F7A6B1, que dan 7,50 · 8,46 · 9,59 sobre el papel de noche. LA REGLA, Y ES LA DEL IMPRESO: el color de parte aparece como CAMPO o como CUADRADO, nunca como texto pequeno. Es lo que hacen el folio y el indice del interior 7x10, y es lo que impide que un numero de figura salga en ambar a 1,53:1. */ --p1:#1F2BD1; --p1-on:#F6EFE3; --p1-ink:#1F2BD1; --p2:#FFB627; --p2-on:#1A1918; --p2-ink:#8F5E00; --p3:#F7A6B1; --p3-on:#1A1918; --p3-ink:#A8203C; /* la marca ESTRUCTURAL: numero de figura, numero de seccion, cuadrado de la cabecera. Es cobalto y no cambia con la parte, porque no dice "parte": dice "esto es del libro". Separarla de --part es lo que permite que --part sea ambar o rosa sin romper un contraste. */ --mark:#1F2BD1; /* ==== D90 · EL CUARTO COLOR: EL VERDE DEL ACIERTO ======================== Carlos: "si cobalto esta bien para el acierto, o agregar un verde a la paleta tambien seria mejor". Entra el verde, y por tres razones medidas: · El cobalto ya tiene DOS trabajos —"el libro se nombra" y el color de la parte I— y esta por toda la pagina. Un tercero no lo suma: lo diluye, y un color que esta en todas partes deja de senalar. · El ambar se lee como aviso, no como acierto. Lo levanto Mateo y es cierto. · Un color que SOLO aparece cuando aciertas senala sin competir con nada. DE DONDE SALE, porque no es un verde de sistema. Se derivo como los demas secundarios: tono fijo, saturacion del rango de la familia (.72, entre el .74 del cobalto y el .84 del rosa) y luminosidad bajada hasta cruzar 4,5:1 sobre crema. El tono, 175 grados, se eligio midiendo y no de oido — es el punto donde se separa del granate del fallo sin acercarse al cobalto: verde / granate 181 normal · 146 deuteranopia · 95 protanopia verde / cobalto 124 normal · 111 deuteranopia · 119 protanopia verde / ambar 254 normal · 264 deuteranopia · 268 protanopia Un verde mas amarillo (150 grados) cae a 28 de protanopia contra el granate: para un ojo de cada doce serian el mismo color. Es frio, como el cobalto, y por eso parece del mismo libro y no de una libreria de componentes. PARA QUE SIRVE Y PARA QUE NO. Sirve para UNA cosa: decir que el lector acerto. No es un color de parte, no es un estado de exito generico, no va en botones ni en enlaces ni en avisos de guardado, y no entra en las figuras. Si algun dia aparece en un sitio que no sea un acierto del lector, esta mal. Es el unico valor del sistema que sirve de CAMPO y de TINTA a la vez, porque es oscuro: crema encima da 4,53:1 y el mismo valor sobre crema da 4,53:1. De noche, #178E84: 4,55:1 sobre el papel de noche. */ --ok:#147A72; --ok-on:#F6EFE3; /* ==== D84-B · RETIRO DE LOS TRES COLORES DE PARTE — PENDIENTE DE CARLOS ==== Carlos los vio en preview, asi que retirarlos necesita su OK explicito (D50). Va aislado a proposito: esto es lo UNICO que hay que tocar para revertirlo, y revertirlo no toca nada del sistema nuevo. Por que se propone: el eyebrow ya dice "Part II" con una palabra y el color lo repetia. Quitado uno, no se pierde significado, solo ruido (P4). Queda UN color, el de la cubierta, y el numero de figura lo lleva: 7,90:1 sobre crema. PARA REVERTIR, tres pasos y ninguno mas: 1. aqui: --p1:#2F4FD8; --p2:#8F5E00; --p3:#A34457; --part:var(--ink); 2. en el tema oscuro (dos bloques): --p1:#6B87FF; --p2:#FFB627; --p3:#F7A6B1; en lugar de la linea --part de cada uno; 3. reponer los selectores del final de este bloque marcado D84-B. Nada mas del sistema depende de estos tokens. */ /* el color de la parte en curso; lo fija body[data-part] mas abajo. CAMPO Y CUADRADO, nunca texto pequeno. */ --part:var(--p1); --part-on:var(--p1-on); --part-ink:var(--p1-ink); /* ==== fin D84-B ==== */ /* D2 / R2 — la reticula del impreso, 66 / 10,6 / 23,4 de 1040 px */ --prose:686px; --gutter:110px; --rail:244px; --page:1040px; --pad:32px; --shell:calc(var(--page) + var(--pad)*2); --evid-measure:480px; /* 66 caracteres a 15 px */ /* R3 — claim : evidence = 1,33:1. La proporcion ES la idea. */ --claim:20px; --evidence:15px; --micro:13px; /* --- tokens que heredan los shadow roots de las 85 figuras -------------- Las figuras traian sus colores escritos a pelo (rgb(26,25,24), #E4492B, #888...), asi que en tema oscuro quedaban como islas claras sobre el papel negro: tres fondos, no uno (D3). build_web_edition.py reescribe esos valores a estos tokens al copiar la figura, y como las custom properties cruzan el shadow boundary, el tema oscuro pasa a ser gratis. --fx-accent es el UNICO cromatico dentro de una figura (D1, D6): el color de parte significa "parte del libro" y vive en el eyebrow, no en una serie. */ --fx-ink:#1A1918; --fx-ink-rgb:26,25,24; --fx-ink2:#5A5650; --fx-rule:#D8D5CE; --fx-alt:#E9E7E1; --fx-paper:#F6EFE3; --fx-strong:#858078; --fx-accent:#FF5A36; --fx-accent-rgb:255,90,54; --fx-on:#F4F3EF; --fx-on-rgb:244,243,239; --sans:'Instrument Sans',system-ui,sans-serif; --serif:'Instrument Serif',Georgia,serif; /* la cara del vistazo. Respaldo DENTRO del sistema, nunca una del sistema operativo. */ --loud:'Archivo Black62','Instrument Sans',sans-serif; /* la columna del vistazo, derivada de la cubierta impresa: en ella "SCROLL" mide el 86,25 % del ancho y el interlineado sale del mismo cociente, fs/1,304. El avance se lee del archivo de la fuente y va en MAYUSCULAS, que es como se compone: "SCROLL" avanza 2,909 em, asi que 0,8625/2,909 = 0,29649 del ancho. Con el avance de la caja baja (2,075) la palabra medía 1.257 px en una caja de 1.040 y la L se cortaba contra el borde derecho. */ --loop-fs:calc(100cqw * .29649); --loop-lh:calc(100cqw * .22737); --headh:70px; /* alto real de .top: 69 px (68 a 810) */ /* D84 — EL AIRE BAJO LA BANDA, UNA SOLA VEZ. Estaba escrito en tres sitios con tres valores —51 px el censo, un clamp la portadilla, y 1,1em heredado de .stand en el aparato— y coincidia dos veces de tres: las dos paginas del aparato abrian con 22-26 px contra los 52 de cualquier capitulo, en los SIETE anchos. Eso no es un sistema, son tres accidentes que se parecen. Un numero, cuatro aperturas. */ --after-band:51px; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --paper:#161514; --ink:#EDEBE6; --ink2:#A29C93; --rule:#2E2C29; --accent:#FF5A36; --on-accent:#161514; /* 5,88:1 */ --p1:#1F2BD1; --p1-on:#F6EFE3; --p1-ink:#8FA0FF; --p2:#FFB627; --p2-on:#1A1918; --p2-ink:#E0A733; --p3:#F7A6B1; --p3-on:#1A1918; --p3-ink:#F7A6B1; --mark:#8FA0FF; --ok:#178E84; --ok-on:#161514; --part:var(--p1); --part-on:var(--p1-on); --part-ink:var(--p1-ink); --fx-ink:#EDEBE6; --fx-ink-rgb:237,235,230; --fx-ink2:#A29C93; --fx-rule:#35332F; --fx-alt:#201F1D; --fx-paper:#161514; --fx-strong:#8F8A82; --fx-accent:#FF5A36; --fx-accent-rgb:255,90,54; --fx-on:#161514; --fx-on-rgb:22,21,20; --fx-accent-ink:#8FA0FF; /* 7,50:1 */ }} :root[data-theme="dark"]{--paper:#161514;--ink:#EDEBE6;--ink2:#A29C93;--rule:#2E2C29; --accent:#FF5A36;--on-accent:#161514; /* 5,88:1 */ --p1:#1F2BD1;--p1-on:#F6EFE3;--p1-ink:#8FA0FF; --p2:#FFB627;--p2-on:#1A1918;--p2-ink:#E0A733; --p3:#F7A6B1;--p3-on:#1A1918;--p3-ink:#F7A6B1; --mark:#8FA0FF;--ok:#178E84;--ok-on:#161514; --part:var(--p1);--part-on:var(--p1-on);--part-ink:var(--p1-ink); --fx-ink:#EDEBE6; --fx-ink-rgb:237,235,230; --fx-ink2:#A29C93; --fx-rule:#35332F; --fx-alt:#201F1D; --fx-paper:#161514; --fx-strong:#8F8A82; --fx-accent:#FF5A36; --fx-accent-rgb:255,90,54; --fx-on:#161514; --fx-on-rgb:22,21,20; --fx-accent-ink:#8FA0FF; /* 7,50:1 */ } /* ==== D84-B (sigue) ==== D1 se cumple todavia — el color vive en el eyebrow y en el numero de figura — pero ya no hay TRES colores: hay uno, el de la cubierta. La parte la dice la palabra, que es lo que siempre la dijo. Los selectores retirados, listos para volver si Carlos lo pide: body[data-part="1"]{--part:var(--p1)} body[data-part="2"]{--part:var(--p2)} body[data-part="3"]{--part:var(--p3)} .toc li.part.p1{--part:var(--p1)} .toc li.part.p2{--part:var(--p2)} .toc li.part.p3{--part:var(--p3)} El atributo data-part sigue escribiendose en el y las clases p1/p2/p3 siguen en el indice: el generador no se toco, asi que volver es solo CSS. ==== fin D84-B ==== */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable} /* A2 — la ventana de lectura deja quieto lo de detras. showModal() atrapa el foco, devuelve el foco al cerrar y deja inerte el fondo, pero NO para su scroll: con la figura abierta, la rueda seguia pasando paginas debajo. El `scrollbar-gutter:stable` de arriba es la otra mitad: sin el, quitar el overflow se lleva la barra y la columna salta 15 px al abrir y otros 15 al cerrar, que es cambiar un defecto por un salto de maqueta. */ html:has(dialog[open]){overflow:hidden} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans); font-size:var(--claim);line-height:1.62;font-kerning:normal; font-variant-numeric:oldstyle-nums proportional-nums} .skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 14px} a{color:inherit} /* D88 — el foco deja de ser un color y pasa a ser un contraste: tinta con halo de crema. 15,36:1 sobre el papel, y el halo lo hace visible tambien cuando cae sobre un relleno oscuro. La banda cobalto lo invierte, abajo. */ :focus-visible{outline:2px solid var(--ink);outline-offset:2px; box-shadow:0 0 0 4px var(--paper)} img,svg{max-width:100%} /* ---------- cabecera ---------------------------------------------------- */ .top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap; max-width:var(--shell);margin:0 auto;padding:22px var(--pad)} .brand{font-weight:600;font-size:var(--evidence);letter-spacing:.02em;text-decoration:none} .top nav{display:flex;gap:18px;font-size:var(--evidence);color:var(--ink2)} .top nav a{text-decoration:none} .top nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} main{max-width:var(--shell);margin:0 auto;padding:0 var(--pad) 7rem} /* ============================ D84 · LA BANDA ============================== IDEA (G1): el cobalto es la capa de vistazo; la crema y la tinta son la lectura. Sale de la misma medicion que el resto de la edicion: 20 px es la linea entre el vistazo y la lectura, y el fondo la dibuja. Hay TRES bandas de cobalto y no hay una cuarta: 1. la portada del indice — el libro se nombra 2. las doce aperturas de capitulo — el capitulo se nombra 3. el estado de vistazo (R6) — el capitulo con la lectura retirada En las tres no hay nada que leer. En todo lo demas si lo hay, y por eso es crema. La banda sangra a los dos lados y su contenido sigue alineado a la reticula. NO se sangra con vw: 100vw incluye la barra de scroll, asi que en cualquier pagina con scroll —o sea, en todas— la banda sobraba los 15 px de la barra y la pagina se desplazaba en horizontal. Se sangra contra el CONTENEDOR (el body), cuya caja de contenido ya excluye la barra, y la cuenta sale exacta en los siete anchos. Tampoco se recorta el sobrante con overflow: recortar es esconder, y un desborde que no se ve no se arregla (D42). Si la cuenta falla, tiene que verse. ======================================================================= */ /* D89 — la parte en curso viste al capitulo. El generador ya escribia body[data-part]; hasta hoy no lo leia nadie. */ body[data-part="1"]{--part:var(--p1);--part-on:var(--p1-on);--part-ink:var(--p1-ink)} body[data-part="2"]{--part:var(--p2);--part-on:var(--p2-on);--part-ink:var(--p2-ink)} body[data-part="3"]{--part:var(--p3);--part-on:var(--p3-on);--part-ink:var(--p3-ink)} body{container-type:inline-size} .band{background:var(--cobalt);color:var(--on-cobalt); margin-inline:calc(50% - 50cqw); padding-inline:max(var(--pad),calc(50cqw - var(--page)/2)); container-type:inline-size} .band a{color:inherit} .band :focus-visible{outline-color:var(--on-cobalt);box-shadow:0 0 0 4px var(--cobalt)} /* La columna de silabas: una caja que recorta y una pila que la desborda por arriba y por abajo. El recorte NO es un adorno tomado de la cubierta: en la cubierta significa que el feed no tiene principio ni final, y aqui es lo unico que se repite de ella, en el unico sitio donde el titulo del libro vuelve a aparecer. */ .loopwrap{position:relative;flex:1;min-height:0;overflow:hidden} .loop{position:absolute;left:0;right:0;top:calc(var(--loop-lh) * -.52); font-family:var(--loud);font-weight:900;text-transform:uppercase; font-size:var(--loop-fs);line-height:var(--loop-lh);letter-spacing:-.005em; white-space:nowrap} .loop b{display:block;height:var(--loop-lh);font-weight:inherit} /* ---------- portada e indice -------------------------------------------- */ /* La portada del indice ES la cubierta, en el unico soporte donde su columna puede correr de verdad. Alta exactamente como la ventana menos la cabecera, para que la columna la corten el borde de arriba y el DOBLEZ, que es lo que en el impreso la corta: el canto del libro. A 1440 se ven tres silabas y media (G3). El corte lo tiene que dar un BORDE, no un bloque. En la primera version el nombre y el subtitulo iban abajo sobre el cobalto y la silaba quedaba rebanada contra ellos: no se leia como un corte, se leia como un texto tapado (D42). El nombre baja a la crema, que es donde en un libro va — la cubierta, y detras la portadilla. */ .cover{min-height:calc(100svh - var(--headh));display:flex;flex-direction:column} .cover .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* La portadilla: lo que en el impreso va en la cubierta junto a la columna. Aqui va detras de ella, en crema, porque son 15-20 px, o sea lectura. */ .titlepage{padding-top:var(--after-band)} .titlepage .author{margin:0;font-size:var(--claim);font-weight:600} .titlepage .sub{margin:.3em 0 0;max-width:var(--prose);color:var(--ink2); font-size:var(--claim);text-wrap:pretty} .editionnote{max-width:var(--evid-measure);margin:2.6rem 0 0;padding-top:.8em; border-top:1px solid var(--ink);font-size:var(--evidence);line-height:1.5;color:var(--ink2); font-variant-numeric:lining-nums tabular-nums} .toc ol{list-style:none;margin:0;padding:2.6rem 0 0} /* Abre-parte. D84: el nombre de la parte pasa a la cara de la cubierta, en cobalto sobre crema (7,90:1). Antes eran Instrument Sans 700 al 75 % de ancho y TRES colores; ahora es una cara y un color, y el indice se lee como la portada que tiene encima. */ .toc li.part{margin:3.4rem 0 1rem} .toc li.part .pmark{display:block;font-size:var(--micro);letter-spacing:.13em; text-transform:uppercase;color:var(--ink2);margin-bottom:.34em} .toc li.part .pname{display:block;font-family:var(--loud);font-weight:900; text-transform:uppercase;font-size:44px;line-height:1;letter-spacing:-.01em; /* --part y no --cobalt: sobre el papel de noche el cobalto da 1,63:1. --part ES el cobalto en claro (7,90:1) y su version legible en oscuro (7,50:1). El unico color del sistema, dos valores, un token. */ color:var(--part-ink)} .toc li.part:first-child{margin-top:2.6rem} .toc li a{display:flex;gap:1.2rem;align-items:baseline;padding:.7rem 0;text-decoration:none; border-bottom:1px solid var(--rule);max-width:var(--page)} .toc li a:hover{color:var(--mark)} .toc .num{font-variant-numeric:tabular-nums lining-nums;color:var(--ink2);min-width:2ch;font-size:var(--evidence)} /* ---------- cabecera de capitulo · D84 ---------------------------------- La apertura es la cubierta del capitulo: mismo cobalto, misma cara, misma columna. Lo que NO se toma de la cubierta es el corte: ahi significa "el feed no acaba", y un titulo de capitulo si acaba. Copiarlo seria decoracion (P8). CONSTANTE: el titulo siempre mide el ancho de la pagina. VARIABLE: el cuerpo, porque lo fija la palabra mas larga de cada titulo. El generador escribe --col-em (el avance en em de esa palabra) y el tamano sale de dividir. Techo: la cubierta. Ningun capitulo puede ser mas grande que el libro. */ .chapterhead{padding-block:clamp(26px,5vh,58px) clamp(30px,5vh,62px)} .chapterhead > *{max-width:none} .eyebrow{font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase; color:#CFCCE0;margin:0 0 clamp(14px,2.4vh,26px);font-weight:500} /* 5,75:1 */ .chapterhead h1{font-family:var(--loud);font-weight:900;text-transform:uppercase; /* tres limites, y manda el menor: 1. la linea mas larga mide la PAGINA 100cqw / --col-em 2. ningun capitulo es mas grande que el libro --loop-fs 3. la apertura entera cabe en UNA pantalla (svh - cabecera - 170) El tercero existe porque sin el, "Sistemas antes que piezas sueltas" abria con una banda de 925 px que empujaba la primera linea del capitulo fuera del doblez: una portada de capitulo que no se ve entera no es una portada. */ font-size:min(calc(100cqw / var(--col-em,6)),var(--loop-fs), calc((100svh - var(--headh) - 170px) / (var(--col-lines,3) * .94))); line-height:.94;letter-spacing:-.008em;margin:0;overflow:hidden} /* D84 — LA LINEA DEL TITULO NO SE PARTE NUNCA. Con el respaldo de Archivo, que es mucho mas ancho, una de las tres lineas se partia en dos: el H1 pasaba de 224 a 299 px y la pagina daba un salto de 75 px a los ~780 ms (Diego, CLS §2.3). Chrome lo descarta de la metrica porque llega marcado hadRecentInput, pero el lector lo ve. De las dos salidas que midio Diego elijo la suya B, y no por gusto: la A recorta la cuarta linea POR ABAJO, justo en el borde cobalto/crema, que en D84 es el umbral y significa algo — habria texto rebanado ahi durante 700 ms y luego no, o sea un defecto disfrazado de la idea, y ademas contradice N6 (ese borde puede desplazarse, no fingirse). B recorta POR LA DERECHA, en el canto, que es justo lo que hace la cubierta: la columna se sale del borde porque el feed no acaba. Durante 700 ms el titulo se comporta como la portada y despues se asienta. Falla hacia dentro del sistema. El overflow:hidden es permanente, asi que solo vale si en regimen NO recorta nada. Medido en las 168 combinaciones (12 capitulos x 7 anchos x 2 idiomas): PEOR HOLGURA 5,7 px, en "Economics" del cap. 3 EN a 390. Cero casos por debajo de 2 px. Y no es suerte: la caja se dimensiona con el avance CRUDO de la fuente (--col-em sale del hmtx del propio archivo) y encima se aplica letter-spacing:-.008em, que RESTA. La holgura de cada linea es por tanto |tracking| x (caracteres - 1), siempre positiva y proporcional al cuerpo: 0,008 x 80 px x 9 caracteres = 5,76 px, que es justo lo medido. CONSECUENCIA, y es una constante: si alguien pone letter-spacing a 0 o positivo en este H1, la holgura desaparece y overflow:hidden empieza a recortar de verdad, en silencio. El tracking negativo no es un ajuste optico aqui: es lo que sostiene el recorte (D42 — la venda solo vale si no tapa nada). */ .chapterhead h1 span{display:block;white-space:nowrap} /* .stand vive en dos sitios y NO quieren el mismo aire: dentro de la cabecera de un capitulo es una bajada que sigue a su titulo (1,1em), y en las dos paginas del aparato es lo primero que hay debajo de una banda a sangre (--after-band). Desde D84 la bajada del aparato salio de la cabecera, y se quedo con el aire de la que no era: 22 px donde tocaban 51. */ .stand{color:var(--ink2);margin:1.1em 0 0;max-width:var(--prose)} main > .stand,main > .nplead{margin-top:var(--after-band)} /* ---------- prosa: la columna del claim --------------------------------- */ /* D84 — el aire bajo la banda lo pone la PROSA, no el primer elemento que caiga. Medido: a >=1200 el censo tenia margin-top:0 y aun asi habia 51 px, que salian del colapso de margenes del bloque siguiente y coincidian con --after-band por casualidad. Dos mecanismos dando el mismo numero no son un sistema: si alguien cambiara el token, el aparato y el telefono se moverian y los capitulos en escritorio se quedarian donde estaban, en silencio. El padding de .prose corta el colapso y hace que el 51 tenga un solo origen. */ .prose{max-width:var(--page);padding-top:var(--after-band)} /* El aire entre secciones lo lleva la SECCION, no el H2: asi el carril, que es el primer hijo, arranca a la altura del titulo y no colgando por debajo. */ .sec{margin:3.2rem 0 0} /* first-of-type y NO first-child: el primer hijo de .prose es el CENSO, asi que .sec:first-child no ha coincidido nunca — ni antes ni despues de D84 — y la primera seccion siempre ha llevado sus 3,2rem. Cuando .prose no tenia relleno eso daba 51 px y cuadraba por casualidad con el censo; al poner el aire en el relleno, los dos se sumaban y la prosa caia a 102 mientras el carril se quedaba en 51. El aire lo pone el relleno de .prose, una vez, para las dos columnas. */ .prose > .sec:first-of-type{margin-top:0} .sec > p,.sec > h2{max-width:var(--prose)} .sec > p{margin:0 0 1.1em} .sec > h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.16; letter-spacing:-.012em;margin:0 0 .75em;text-wrap:balance;scroll-margin-top:2rem} .prose em{font-style:italic} .prose strong{font-weight:600} /* ---------- R2 · el carril de fuentes ------------------------------------ La columna exterior, a la derecha, siempre. Resuelve los 579 px de vacio sin intencion del layout anterior: ese hueco ahora carga la evidencia. A 15 px contra los 20 px del claim — 1,33:1, que es la idea dicha en escala. La PROFUNDIDAD se marca con la regla, nunca con color (el color ya significa "parte"): full regla solida de tinta leido completo abstract regla solida gris resumen y registro verificados record regla discontinua solo el registro preprint regla discontinua preprint, no garantizado La discontinua extiende el signo que la figura 4.2 ya usa para lo no garantizado (border:1px dashed). Es el mismo signo, no uno nuevo. */ .rail{font-size:var(--evidence);line-height:1.45;color:var(--ink2); font-variant-numeric:lining-nums tabular-nums;margin-top:.55em} .rail .railhead{font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase; color:var(--ink2);margin:0 0 .9em;font-weight:500} .rail .railhead a{text-decoration:none;border-bottom:1px solid var(--rule)} .rail .railhead a:hover{color:var(--ink);border-bottom-color:var(--ink)} .rail ol{list-style:none;margin:0;padding:0} .rail li{margin:0 0 1.15em;padding-top:.5em;border-top:1px solid var(--ink)} .rail li[data-depth="abstract"]{border-top-color:var(--ink2)} .rail li[data-depth="record"],.rail li[data-depth="preprint"]{border-top-style:dashed;border-top-color:var(--ink2)} .rail li:last-child{margin-bottom:0} /* D84 — UNA URL NO ES UNA PALABRA. La cita de Widener y colegas (cap. 7 ES, y cualquier otra que traiga una direccion en vez de un DOI) termina en una cadena de 105 caracteres sin espacios: 389 px de linea dentro de una columna de 244, o sea 145 px de texto fuera del carril y la pagina desplazandose en horizontal 25 px a 1280 y 65 px a 1200. .doi ya llevaba `overflow-wrap:anywhere` desde siempre; .cite no llevaba nada, y la direccion iba dentro de .cite. break-word y no anywhere: rompe solo lo que no cabe y deja intactas las palabras normales. Mismo tratamiento a la fuente de una figura y a la de la ventana de lectura, que cargan el mismo tipo de cadena. El desborde es ANTERIOR a D84 (comprobado con el CSS del 2026-09-23) y se colo porque el check anterior solo miro 1440, 810 y 390. No se tapa con overflow. */ .rail .cite{display:block;color:var(--ink2);text-decoration:none; border-bottom:1px solid transparent;overflow-wrap:break-word} .rail .cite:hover{color:var(--ink);border-bottom-color:var(--rule)} .rail .doi{display:block;font-size:var(--micro);margin-top:.3em;overflow-wrap:anywhere;color:var(--ink2)} /* Los DOS estados de "sin fuente". No son el mismo hecho y no pueden llevar la misma marca. metodo regla punteada gris el autor declara: aqui no hay evidencia porque esto es su marco, y lo dice en su sitio revisar regla punteada ACENTO el build marco la seccion y todavia no se cerro Es el UNICO sitio del carril donde aparece el acento, y esta aqui porque significa "aqui el libro todavia no se ha comprobado a si mismo". Sin el, las 28 secciones sin fuente se leerian todas como decision de autor, y 10 de ellas no lo son. */ .rail .none{padding-top:.5em;border-top:1px dashed var(--rule);color:var(--ink2)} /* D88 — forma ANTES que color: `revisar` es el unico estado con trazo DOBLE, que es lo que lo separa de `metodo` sin mirar el tono. El ocre lo refuerza. */ .rail .none[data-none="revisar"]{border-top-color:var(--p2-ink);border-top-style:double; border-top-width:3px;color:var(--ink)} .rail .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* la clave del codigo de reglas. Vive en la pagina de Fuentes, que es donde ordena las 88 entradas. En la cabecera de capitulo NO va: va el censo, que imprime los mismos cuatro terminos con la cuenta de cada uno. */ .raillegend li{margin-bottom:.55em;padding-top:.4em} .raillegend .cite{font-size:var(--micro)} /* ---------- R4 · el censo del capitulo ----------------------------------- La valoracion ENCIMA del capitulo, no en una nota al pie: el precedente limpio es eLife, que desde 2023 publica un juicio editorial con vocabulario cerrado arriba del articulo, antes del resumen. Aqui baja un nivel de grano: no una valoracion del capitulo entero, sino la forma de su evidencia seccion por seccion, dibujada con el mismo codigo de reglas que usa el carril. El sarpullido de rayas ES tipografia, no un grafico: cada raya es una seccion, en orden de lectura, con el trazo de su profundidad, y lleva a esa seccion. A 80 px se sigue leyendo cuantas son solidas y cuantas discontinuas, que es lo unico que tiene que decir a esa distancia (G3). */ /* 7 px de separacion: con 5, dos secciones contiguas del mismo estado se leian como una sola raya larga y el censo perdia la cuenta que es su unico trabajo. */ .census .ticks{list-style:none;margin:.2em 0 1.3em;padding:0;display:flex;flex-wrap:wrap;gap:7px} .census .ticks li{margin:0;padding:0;border:0;flex:1 1 16px;min-width:16px;max-width:40px} /* 24 px de alto: WCAG 2.2 SC 2.5.8 (Target Size Minimum, AA) pide 24x24, y la raya dibujada son 2 px. El resto del objetivo es aire debajo de la raya. */ .census .ticks a{display:block;height:24px;border-top:2px solid var(--ink);text-decoration:none} .census .ticks li[data-depth="abstract"] a{border-top-color:var(--ink2)} .census .ticks li[data-depth="record"] a, .census .ticks li[data-depth="preprint"] a{border-top-style:dashed;border-top-color:var(--ink2)} /* --ink2 y no --rule: en el carril la regla acompana a un texto que dice lo mismo, asi que es decorativa; aqui la raya ES el dato, y --rule sobre papel da 1,27:1 — por debajo del 3:1 que WCAG 1.4.11 pide a un objeto grafico que informa. --ink2 da 6,5:1 y el punteado sigue distinguiendose del discontinuo y del solido. */ .census .ticks li[data-none] a{border-top-style:dotted;border-top-color:var(--ink2)} .census .ticks li[data-none="revisar"] a{border-top-color:var(--p2-ink); border-top-style:double;border-top-width:3px} .census .ticks a:hover{border-top-width:4px;margin-top:-2px} .census .ticks a:focus-visible{outline-offset:1px} .census .censusline{margin:0;font-size:var(--evidence);line-height:1.45;color:var(--ink2)} .census .censuswords{margin:.85em 0 0;padding-top:.7em;border-top:1px solid var(--rule); font-size:var(--evidence);line-height:1.45;color:var(--ink2); font-variant-numeric:lining-nums tabular-nums} .census .censuswords b{color:var(--ink);font-weight:600} .census .glancebtn{display:inline-block;margin-top:.75em;font:inherit;font-size:var(--evidence); color:var(--ink);background:none;border:0;border-bottom:1px solid var(--ink); padding:0 0 .18em;cursor:pointer;text-align:left;min-height:34px} .census .glancebtn:hover{color:var(--mark);border-bottom-color:var(--mark)} /* ---------- el estado de vistazo de la pagina ---------------------------- Lo que un scroll se lleva de un capitulo: sus titulos y los rotulos de sus figuras. No es un desenfoque ni un efecto: es el capitulo con el resto retirado, y por eso el numero que lo acompana es una cuenta y no una impresion. Nada se anima y nada se guarda: se enciende, se ve y se apaga. */ /* D84 — LA TERCERA BANDA. Encender el vistazo no cambia de estilo: cambia de capa. Lo que queda en la pagina es exactamente lo que el vistazo se lleva, asi que la pagina pasa al fondo del vistazo y, sin una linea que lo explique, se convierte en la cubierta del capitulo. Esta aqui porque significa "esto es todo lo que un scroll se lleva" (P8). El cobalto NO tiene tema: una cubierta no se vuelve oscura de noche. Por eso se reescriben los tokens y no se anade una regla por elemento: todo lo de dentro —incluidas las 85 figuras, que heredan --fx-* por el shadow boundary— cambia de capa a la vez. */ body[data-glance]{ --paper:var(--cobalt); --ink:var(--on-cobalt); --ink2:#C9D0F5; /* 7,90 / 5,95:1 */ --rule:rgba(246,239,227,.38); --accent:#FFB627; --on-accent:#1A1918;/* 5,15:1 */ --mark:#FFB627; /* 5,15:1 */ --part:var(--on-cobalt); --fx-ink:#F6EFE3; --fx-ink-rgb:246,239,227; --fx-ink2:#C9D0F5; --fx-rule:rgba(246,239,227,.34); --fx-alt:#2A35D6; --fx-paper:#1F2BD1; --fx-strong:#AEB8EC; --fx-accent:#FFB627; --fx-accent-rgb:255,182,39; --fx-accent-ink:#FFB627; /* 5,15:1 */ --fx-on:#1F2BD1; --fx-on-rgb:31,43,209; background:var(--cobalt); color:var(--on-cobalt)} /* la cabecera de capitulo ya era cobalto: dentro del vistazo deja de ser una banda aparte y se funde con la pagina, sin borde ni cambio de tono. */ body[data-glance] .band{margin-inline:0;padding-inline:0} body[data-glance] .prose > .sec > p, body[data-glance] .prose > .sec > .rail, body[data-glance] .prose .figbox, body[data-glance] .prose .gonemark, body[data-glance] .prose .gonetxt, body[data-glance] .prose .gonesig, body[data-glance] .prose .figread, body[data-glance] .prose .figsrc, body[data-glance] .prose .fignum, body[data-glance] .prose .goneref, body[data-glance] .quiz, body[data-glance] .census .ticks, body[data-glance] .census .censusline{display:none} /* clear:right empuja la primera figura por debajo del censo y abre un vacio de casi 200 px bajo el H1. En vistazo no hay nada que separar de la columna exterior. */ body[data-glance] .prose .fig{margin:1.6rem 0;width:auto;clear:none} body[data-glance] .chapterhead{padding-bottom:1.2rem} body[data-glance] .prose .figcaption, body[data-glance] .prose figcaption{margin:0;max-width:var(--prose)} body[data-glance] .prose .figttl{display:block;font-size:20px;line-height:1.2; letter-spacing:-.008em;color:var(--ink2);max-width:36ch;text-wrap:balance} /* De un marco de ausencia, un scroll se lleva su titulo: los 28 px en serif que hay dentro. El marco, su texto y su firma son lectura, como todo lo demas. */ body[data-glance] .fig.gone .gonebox{border:0;padding:0;display:block} body[data-glance] .fig.gone .gonebox::before{content:none} body[data-glance] .fig.gone .gonein{display:block;max-width:var(--prose)} body[data-glance] .fig.gone .gonettl{font-family:var(--sans);font-size:20px; line-height:1.2;letter-spacing:-.008em;color:var(--ink2);margin:0;max-width:36ch} body[data-glance] .sec{margin:2.4rem 0 0} body[data-glance] .sec-open{margin:0} body[data-glance] .census .glancebtn{border-bottom-color:var(--on-cobalt);color:var(--on-cobalt)} /* el censo se retira en vistazo salvo su boton y su cuenta: la cuenta es la unica cifra que el vistazo si entrega, porque es la que lo mide. */ body[data-glance] .census{border:0} /* ---------- R1 · las figuras --------------------------------------------- Native or nothing. La figura se dibuja SIEMPRE a sus 900 px nativos: si el hueco los admite se ve entera, y si no, se ve solo la capa de vistazo, re-fluida a tamano pleno. Nunca escalada hacia abajo: el suelo duro es que ningun texto de figura baje de 12 px efectivos, y escalar 900 a 362 los dejaba en 4. */ /* La caja de la figura mide lo que mide la figura. Al ir a 100 % del grid, sus reglas sobresalian 140 px por la derecha del dibujo: una regla en el aire. */ .fig{margin:4.2rem 0;padding:0;width:900px;max-width:100%;clear:right} /* La capa de vistazo se compone SIEMPRE a la medida de la prosa, en todos los anchos. Antes la figura entera aparecia sola porque el hueco daba de si — el vistazo era un accidente del ancho. Ahora el vistazo es la entrega por defecto y la lectura se pide, que es lo que dice el libro; 900 px de ancho a 20 px darian una medida de mas de 100 caracteres, que no es una medida. */ /* min(): --prose son 686 px fijos, y un `max-width:686px` sobre un elemento de `width:900px` NO lo baja de 686 — en un telefono de 390 el documento se iba a 700 px de ancho y la pagina entera se desplazaba en horizontal. El max-width no es un limite superior si el limite inferior es mayor que el viewport. */ .fig[data-mode^="glance"]{max-width:min(var(--prose),100%)} [hidden]{display:none!important} .fig > .figbox{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule); padding:16px 0 14px;background:none;position:relative} .fig > .figbox > .figscale{transform-origin:top left} .fig figcaption{margin:.85em 0 0;max-width:var(--evid-measure);font-size:var(--evidence); color:var(--ink2);line-height:1.45} .fig .fignum{display:block;font-size:var(--micro);letter-spacing:.13em;text-transform:uppercase; color:var(--mark);font-weight:500;margin-bottom:.35em} .fig .figttl{color:var(--ink)} /* En modo vistazo el titulo del pie ES la capa de vistazo de la figura: sube a los 20 px del umbral. No es una excepcion — es la misma regla. El titulo salio del dibujo (D5) y en un telefono el dibujo no cabe, asi que el titulo hace su trabajo desde el pie, a la escala que le corresponde. */ .fig[data-mode^="glance"] .figttl{display:block;font-size:20px;line-height:1.18; letter-spacing:-.008em;color:var(--ink);margin-top:.1em;max-width:22ch;text-wrap:balance} /* Una figura sin capa de vistazo propia no deja una caja vacia con sus reglas colgando: la caja se retira y queda el pie, la fuente y el control. */ .fig[data-mode="glance-empty"] > .figbox{display:none} .fig[data-mode="glance-empty"] figcaption{padding-top:.55em;border-top:1px solid var(--ink)} /* En modo vistazo la fuente de la figura sube al pie: la evidencia se lee a 15 px, no a los 10 que quedarian dentro. Es la misma regla del carril. */ .fig .figsrc{display:block;margin-top:.75em;padding-top:.55em;border-top:1px solid var(--rule); max-width:var(--evid-measure);font-size:var(--micro);line-height:1.45;color:var(--ink2); overflow-wrap:break-word} .fig.is-loading > .figbox{min-height:var(--fb,0px);display:grid;place-items:center} /* D-CLS: era 160px y hacia crecer la figura dos veces */ .fig.is-loading > .figbox::after{content:"";width:18px;height:18px;border:2px solid var(--rule); border-top-color:var(--ink2);border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.fig.is-loading > .figbox::after{animation:none}} /* ---------- R5 · las tres ausencias disenadas ---------------------------- Una figura retirada conserva SU SITIO y SU MEDIDA. Es la regla que Sarah Leo se impuso al auditar en publico siete graficos del Economist (medium.economist.com, 27 de marzo de 2019): la correccion tiene que caber en el mismo espacio que el original, porque es para imprenta. Aqui se toma al pie de la letra — 900x939, 900x695 y 900x950, los altos reales de las tres tarjetas que se cayeron — y por eso retirar algo cuesta exactamente lo que costaba tenerlo. El marco es punteado porque es el mismo signo que el libro ya usa para lo no garantizado (la regla discontinua del carril y de la figura 4.2). No es una placa ni un velo: no esconde nada, delimita lo que falta. */ .fig.gone{margin:4.2rem 0;width:900px;max-width:100%;clear:right} /* El hueco conserva la PROPORCION de la figura que se fue (900x939, 900x695, 900x950), asi que ocupa en cada ancho lo mismo que habria ocupado ella. Lo hace un ::before de padding porcentual en la misma celda de grid que el texto: la fila mide lo que mida el mas alto de los dos, de modo que el marco nunca encoge por debajo de su medida y tampoco recorta el texto en un telefono. */ .fig.gone .gonebox{border:1px dashed var(--rule);padding:clamp(20px,4vw,52px); display:grid;grid-template-columns:1fr;align-items:stretch} .fig.gone .gonebox::before{content:"";grid-area:1/1;width:0;padding-top:var(--gone-pct,100%)} /* El alto no se rellena: se usa. La marca arriba, el texto debajo de ella y la firma pegada al borde inferior, que es donde la figura terminaba. Centrado, el bloque flotaba en mitad de un rectangulo y el hueco parecia un descuido; asi el hueco es la medida de lo que se fue y se lee de arriba abajo. */ .fig.gone .gonein{grid-area:1/1;max-width:var(--evid-measure); display:flex;flex-direction:column} .fig.gone .gonemark{margin:0 0 1.5em;font-size:var(--micro);letter-spacing:.13em; text-transform:uppercase;color:var(--mark);font-weight:500} .fig.gone .gonettl{margin:0 0 .8em;font-family:var(--serif);font-weight:400; font-size:28px;line-height:1.14;letter-spacing:-.012em;color:var(--ink);text-wrap:balance} .fig.gone .gonetxt{margin:0;font-size:var(--evidence);line-height:1.55;color:var(--ink2)} .fig.gone .gonesig{margin:1.5em 0 0;margin-top:auto;padding-top:.7em;border-top:1px solid var(--rule); font-size:var(--micro);letter-spacing:.06em;color:var(--ink2); font-variant-numeric:lining-nums tabular-nums} .fig.gone figcaption{margin:.85em 0 0;max-width:var(--evid-measure);font-size:var(--evidence); color:var(--ink2);line-height:1.45} /* el numero y el titulo de una figura que ya no esta se imprimen tachados: el hueco tiene nombre, y el nombre dice que se retiro. */ .fig.gone .fignum{text-decoration:line-through; text-decoration-thickness:1px;text-decoration-color:var(--ink2)} .fig.gone .goneref{display:inline-block;margin-top:.7em;font-size:var(--micro); color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--rule)} .fig.gone .goneref:hover{color:var(--ink);border-bottom-color:var(--ink)} /* ---------- la pagina del registro --------------------------------------- */ .nplead p{margin:0 0 .9em} .nplead p:last-child{margin-bottom:0} .notprinted{max-width:var(--page);margin:3.4rem 0 0;padding:0;list-style:none} .notprinted li{margin:0 0 2.8rem;padding-top:.7em;border-top:1px solid var(--ink); max-width:var(--prose)} .notprinted .nplab{margin:0 0 .5em;font-weight:600;font-size:var(--claim); display:flex;justify-content:space-between;align-items:baseline;gap:.4em 1.2em; flex-wrap:wrap} /* Sin flex-wrap y con white-space:nowrap, una entrada con cuatro referencias ("Figure 9.1 · 9.2 · 10.7 · ...") medía 409 px y empujaba el documento a 485 px de ancho en un telefono de 390: la pagina entera se desplazaba en horizontal. La referencia envuelve y, cuando no cabe al lado, baja a su propia linea. */ .notprinted .npref{font-weight:400;font-size:var(--micro);letter-spacing:.06em; text-transform:uppercase;color:var(--ink2);text-align:right; font-variant-numeric:lining-nums tabular-nums} @media (max-width:640px){ .notprinted .npref{flex:1 0 100%;text-align:left} } .notprinted .nptxt{margin:0;font-size:var(--evidence);line-height:1.55;color:var(--ink2)} /* el aparato en el indice: mismo peso que un capitulo, sin numero */ .toc li.apparatus .num{color:transparent} /* el control: abre las dos capas a 900 px, con scroll y zoom */ .figread{display:inline-flex;align-items:baseline;gap:.5em;margin-top:1.1em; font:inherit;font-size:var(--evidence);color:var(--ink);background:none; border:0;border-bottom:1px solid var(--ink);padding:0 0 .18em;cursor:pointer; text-align:left} .figread:hover{color:var(--mark);border-bottom-color:var(--mark)} .figread .arr{font-size:var(--micro)} /* EL PRECIO. El control no dice solo "abre": dice cuanto texto te esta guardando. Es la cifra del libro aplicada a la figura que tienes delante, y cambia en cada una — 85 veces, el objeto dice su propia tesis sin una sola linea que la explique (P8: esta aqui porque significa "esto es lo que el vistazo no te dio"). */ .figread .figcost{color:var(--ink2);font-size:var(--micro); font-variant-numeric:lining-nums tabular-nums} .figread:hover .figcost{color:inherit} /* la fuente de la seccion, dentro del veredicto de una pregunta: el ultimo peldano del aparato. La pregunta se comprueba donde el libro se comprueba. */ .rail.railquiz{margin:1.4em 0 0;max-width:var(--evid-measure)} .rail.railquiz li{margin-bottom:.7em} .rail.railquiz .railhead{margin-bottom:.7em} dialog.figfull{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0; border:0;background:var(--paper);color:var(--ink);display:none} dialog.figfull[open]{display:flex;flex-direction:column} dialog.figfull::backdrop{background:var(--paper)} .figfull .ffbar{display:grid;grid-template-columns:1fr auto auto;align-items:center; column-gap:16px;row-gap:10px;padding:14px var(--pad);border-bottom:1px solid var(--rule); background:var(--paper)} .figfull .ffttl{font-size:var(--evidence);color:var(--ink2);margin:0;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .figfull .ffttl b{color:var(--ink);font-weight:500} .figfull .ffzoom{display:flex;gap:2px} .figfull .ffbtn{font:inherit;font-size:var(--evidence);color:var(--ink);background:none; border:1px solid var(--rule);padding:.3em .8em;cursor:pointer;min-width:44px;min-height:34px} .figfull .ffbtn[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);font-weight:600} .figfull .ffbtn:hover{border-color:var(--ink)} .figfull .ffclose{font:inherit;font-size:var(--evidence);color:var(--ink);background:none; border:0;border-bottom:1px solid var(--ink);padding:0 0 .18em;cursor:pointer;min-height:34px} .figfull .ffpan{margin:0;padding:9px var(--pad);border-bottom:1px solid var(--rule); font-size:var(--micro);color:var(--ink2);background:var(--paper)} .figfull .ffpane{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:24px var(--pad) 40px} .figfull .ffstage{position:relative} .figfull .ffinner{width:900px;transform-origin:top left} .figfull .ffhost{display:block} .figfull .ffsrc{max-width:var(--evid-measure);margin:1.4rem 0 0;font-size:var(--micro); line-height:1.45;color:var(--ink2);overflow-wrap:break-word} /* ---------- fuentes (pagina) -------------------------------------------- */ .sources{max-width:var(--page);margin:2.6rem 0 0;padding:0;list-style:none;counter-reset:src} .sources li{position:relative;padding-left:3ch;margin:0 0 1.15em;font-size:var(--evidence); line-height:1.5;max-width:var(--prose);hyphens:manual;overflow-wrap:break-word} .sources li::before{counter-increment:src;content:counter(src);position:absolute;left:0;top:.1em; font-size:var(--micro);color:var(--ink2);font-variant-numeric:tabular-nums lining-nums} .sources .doi{color:var(--ink2);hyphens:none;overflow-wrap:anywhere} .sources .srcnote{display:block;margin-top:.25em;font-size:var(--micro);color:var(--ink2)} /* ---------- pager -------------------------------------------------------- */ .pager{max-width:var(--shell);margin:0 auto;padding:0 var(--pad) 6rem;display:flex; justify-content:space-between;gap:16px;border-top:1px solid var(--rule)} .pager a{padding:1.7rem 0;text-decoration:none;color:var(--ink2);font-size:var(--evidence)} .pager a:hover{color:var(--ink)} .pager .next{margin-left:auto} /* ---------- Compruebalo -------------------------------------------------- */ .quiz{max-width:var(--prose);margin:5.5rem 0 0;padding:2.2rem 0 0;border-top:1px solid var(--ink);clear:right} .quiz>h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.16; letter-spacing:-.012em;margin:0} .quiz .stand{font-size:var(--evidence);margin:.8em 0 0;max-width:var(--evid-measure)} .quiz .qs{list-style:none;margin:2.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:2.6rem} .quiz .ask{margin:0 0 .9em;font-weight:600;text-wrap:pretty} .quiz .opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem} .quiz .opt{display:block;width:100%;text-align:left;font:inherit;font-size:var(--evidence);color:inherit; background:none;border:1px solid var(--rule);padding:.72em 1em;min-height:44px; cursor:pointer;transition:border-color .12s,color .12s} .quiz .opt:hover:not(:disabled){border-color:var(--ink)} .quiz .opt:disabled{cursor:default} /* D89 — esta regla marcaba el acierto con el acento y ha quedado obsoleta: los estados del quiz los viste ux.css con los tres colores de marca. Se retira el filete, no la regla: dejaba DOS barras encimadas sobre la opcion correcta —esta, maciza en tomate, bajo la discontinua en ambar de ux.css— y a 390 se leia como una raya a rayas. Visto en pantalla, no en el CSS. */ .quiz .opt.is-right{border-color:var(--ink);color:var(--ink)} .quiz .opt.is-wrong{border-color:var(--rule);color:var(--ink2);text-decoration:line-through; text-decoration-thickness:1px} .quiz .opt.is-dim{color:var(--ink2)} .quiz .verdict{margin:1rem 0 0} .quiz .why{margin:0;font-size:var(--evidence);color:var(--ink2);max-width:var(--evid-measure)} /* la linea del capitulo en la que se apoya la respuesta: es el libro citandose, o sea estructura, asi que la marca es la del libro y no el acento. */ .quiz .anchor{margin:.85em 0 0;padding:0 0 0 1rem;border-left:2px solid var(--mark); font-family:var(--serif);font-size:var(--claim);line-height:1.4;max-width:var(--evid-measure)} .quiz .alab{display:block;font-family:var(--sans);font-size:var(--micro);letter-spacing:.13em; text-transform:uppercase;color:var(--ink2);margin-bottom:.4em} .quiz .score{margin:2.8rem 0 0;padding-top:1.2rem;border-top:1px solid var(--rule); font-variant-numeric:lining-nums tabular-nums;display:flex;justify-content:space-between; align-items:baseline;gap:1rem;flex-wrap:wrap;font-size:var(--evidence)} .quiz .score b{font-family:var(--serif);font-weight:400;font-size:34px} .quiz .again{font:inherit;font-size:var(--evidence);color:var(--ink2);background:none;border:0; padding:.4em 0;min-height:34px;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .quiz .again:hover{color:var(--ink)} @media (prefers-reduced-motion:reduce){.quiz .opt{transition:none}} /* ---------- ventana de donacion ------------------------------------------ */ .givelink{color:var(--mark);text-decoration:none} .givelink:hover{text-decoration:underline;text-underline-offset:3px} dialog.give{max-width:30rem;width:calc(100% - 32px);border:1px solid var(--rule); background:var(--paper);color:var(--ink);padding:2rem 1.9rem 1.7rem;font-family:var(--sans)} dialog.give::backdrop{background:rgba(0,0,0,.48)} dialog.give h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.14; margin:0 0 .5em;text-wrap:balance} dialog.give p{margin:0 0 1em;font-size:var(--evidence)} .giveclose{float:right;margin:-.7rem -.5rem 0 .6rem;font:inherit;font-size:1.5rem;line-height:1; background:none;border:0;color:var(--ink2);cursor:pointer;min-width:44px;min-height:44px} .giveclose:hover{color:var(--ink)} .givecta{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none; padding:.72em 1.4em;font-size:var(--evidence);font-weight:500} .givecta:hover{background:var(--accent)} .givenote{color:var(--ink2);font-size:var(--micro);margin:0} /* ======================================================================== ANCHOS. Tres bandas, una regla cada una. >=1200 reticula completa: prosa a la izquierda, carril y censo en la columna exterior derecha. <1200 la columna exterior no cabe a una medida legible: el carril baja al final de su seccion y la prosa se centra. LA FIGURA YA NO DEPENDE DEL ANCHO. Antes habia un tercer corte en 964 px, que era donde 900 + 2x32 dejaba de caber, y ahi la figura pasaba de verse entera a verse solo en vistazo. Eso hacia que la tesis del libro se cumpliera por accidente de viewport: en un portatil la lectura venia regalada y en un telefono habia que pedirla. Ahora el vistazo se entrega y la lectura se pide en TODOS los anchos, y la lectura ocurre siempre en el mismo sitio: la ventana de lectura a 900 px con zoom. Un corte menos y una regla en vez de tres (P4, P7). ====================================================================== */ @media (min-width:1200px){ /* clear:right — la columna exterior es UNA columna, no una cadena de floats. Sin el, dos carriles proximos en el flujo (el censo y la apertura, o una anulacion justo detras del carril de su seccion) caben uno al lado del otro y el segundo aterriza en mitad de la columna de prosa, con el parrafo rompiendo alrededor. Un float busca hueco a la izquierda del anterior si le cabe, y aqui le cabia. Con clear:right cada nota empieza por debajo de la anterior y la evidencia se lee en el mismo orden en que se lee el texto. */ .rail{float:right;clear:right;width:var(--rail);margin:0 0 2.2rem var(--gutter)} .rail.railquiz{float:none;width:auto;margin:1.1em 0 0} .chapterhead{position:relative} /* El censo abre la columna exterior y los carriles se apilan detras de el. */ .prose > .census{margin-top:0} } @media (max-width:1199.98px){ :root{--page:900px} main{max-width:calc(900px + var(--pad)*2)} .prose,.sources{max-width:900px} /* width:100% porque en una columna flex un margin-inline:auto le quita el stretch al item y lo encoge a su contenido: el H2 corto salia centrado. .chapterhead sale de la lista: dentro de la banda su contenido ya alinea con la reticula por el padding de la banda, y centrarlo lo sacaba de columna. */ .sec > p,.sec > h2,.quiz,.toc li a{margin-inline:auto;width:100%} /* En vistazo no hay 900 px que ganar, asi que la figura alinea con la prosa. */ .fig[data-mode^="glance"],.fig.gone{max-width:min(var(--prose),100%);margin-inline:auto} /* Sin columna exterior, el carril baja al FINAL de su seccion, no antes del titulo: en el carril va delante del H2 porque ahi el float tiene que arrancar a su altura, pero leido en linea eso pondria las fuentes antes de saber de que seccion son. Al final de la seccion es donde una nota al pie ha vivido siempre. */ .sec{display:flex;flex-direction:column} .sec > .rail{order:99;max-width:var(--prose);margin:2rem auto 0;align-self:center;width:100%} .sec > .rail.railpara{order:0} /* el censo, sin columna exterior, abre el capitulo en la propia columna. D84: 51 px por debajo de la banda, los mismos que deja a >=1200 la columna exterior. Antes eran 0 y el rotulo del censo tocaba el borde del cobalto: un titulo que parece pertenecer a la banda de arriba y no a lo que abre. */ .prose > .census{max-width:var(--prose);margin:0 auto 1rem;width:100%; padding-bottom:1.6rem;border-bottom:1px solid var(--rule)} } @media (max-width:1023.98px){ :root{--claim:19px;--evidence:14px} .toc li.part .pname{font-size:38px} .sec > h2,.quiz > h2,.quiz .score b,dialog.give h2{font-size:30px} } @media (max-width:640px){ :root{--claim:17px;--evidence:13px;--micro:12px;--pad:14px} /* El titulo y el cierre en una fila, el zoom debajo: a 390 el titulo ocupaba dos lineas y empujaba "Close" a chocar visualmente con el. */ .figfull .ffbar{grid-template-columns:1fr auto} .figfull .ffttl{grid-column:1;white-space:normal;overflow:visible} .figfull .ffclose{grid-column:2;grid-row:1} .figfull .ffzoom{grid-column:1/-1;grid-row:2} :root{--headh:92px} .toc li.part .pname{font-size:30px} .sec > h2,.quiz > h2,.quiz .score b,dialog.give h2{font-size:25px} .fig{margin:3rem 0} .fig > .figbox{padding:12px 0 10px} .top{padding:16px var(--pad)} .top nav{gap:14px;width:100%} } @media print{.figread,.top nav,.pager{display:none}} /* ========================================================================== D-CLS — RESERVA MEDIDA DE LAS 85 FIGURAS Diego Salazar · 2026-09-24 Pegar AL FINAL de build/web-assets/book.css. No toca ninguna regla previa salvo una, que se indica abajo y hay que editar en su sitio. EL DEFECTO. La figura entra en el documento como un figcaption de 51 px. book.js le inserta despues una caja de carga de 160 px y, cuando resuelve el fetch de figures/*.html, la caja pasa a su alto real (103-889 px). Son dos saltos por figura. Con red lenta ocurren entre los 3 y los 16 s, con el lector ya leyendo, y el texto se le mueve debajo. Medido a 390 px / Slow 4G / CPU 4x, capitulo 3 EN: CLS 0,1989. Con este bloque: CLS 0,0049. COMO FUNCIONA. La figura ocupa su sitio desde el primer layout y ya no crece. --fb alto de la CAJA (0 en las 21 figuras que salen en glance-empty) min-height alto TOTAL de la figura (caja + pie + boton 'Read the figure'), con 6 px de holgura para el redondeo del pie El padding-top guarda el hueco de la caja ANTES de que book.js la cree y desaparece en el mismo recalculo en que aparece la caja: saldo cero. Sin :has(), a proposito, para no depender de su soporte. HAY QUE EDITAR UNA REGLA EXISTENTE (linea 626 del book.css de las 17:20; era la 489 antes de la reescritura de Andres — buscala por su contenido): antes: .fig.is-loading > .figbox{min-height:160px;display:grid;...} despues: .fig.is-loading > .figbox{min-height:0px;display:grid;...} Si se deja en 160px, las figuras cortas siguen saltando. DE DONDE SALEN LOS NUMEROS. Medidos sobre la propia edicion a 390 / 810 / 1200 con las fuentes ya cargadas; se reserva el MAXIMO de los tres, asi la figura nunca crece. Lo que sobra ya NO se queda: desde R3 el sobrante puede ser de 710 px —una figura que a 810 mide 1.691 reserva 2.401— asi que book.js SUELTA la reserva en cuanto la figura esta dibujada y medida. La reserva es un andamio, no una caja. 26 de las 85 miden distinto en EN y en ES (hasta 63 px), por eso hay dos bloques. Si cambia el texto de un pie o el contenido de una figura hay que volver a medir: node cls-medir-figuras.mjs http://127.0.0.1:8777 en > heights-en.json ========================================================================== */ .fig:not(.is-loading):not([data-mode]):not([data-failed]){padding-top:var(--fb,0px)} .fig > .figbox{min-height:var(--fb,0px)} /* .fig.is-loading > .figbox ya reserva --fb en su regla original (Andres la corrigio ahi mismo, como pedia este bloque), asi que la declaracion que venia aqui se retira: decia lo mismo dos veces. */ /* ---------- en ---------- */ html[lang="en"] .fig[data-src$="fig-01-01-captive-vs-earned-attention.html"]{min-height:1112px;--fb:852px} html[lang="en"] .fig[data-src$="fig-01-02-broadcast-operating-model.html"]{min-height:1812px;--fb:1662px} html[lang="en"] .fig[data-src$="fig-01-03-attention-evolution-timeline.html"]{min-height:749px;--fb:584px} html[lang="en"] .fig[data-src$="fig-01-04-content-supply-vs-attention.html"]{min-height:1074px;--fb:890px} html[lang="en"] .fig[data-src$="fig-01-05-the-room-vs-the-feed.html"]{min-height:1103px;--fb:806px} html[lang="en"] .fig[data-src$="fig-01-06-thirteen-hours-of-media.html"]{min-height:1228px;--fb:1063px} html[lang="en"] .fig[data-src$="fig-02-01-attention-duration-decline.html"]{min-height:1115px;--fb:893px} html[lang="en"] .fig[data-src$="fig-02-02-generational-attention.html"]{min-height:1445px;--fb:1243px} html[lang="en"] .fig[data-src$="fig-02-03-youth-focus-impact.html"]{min-height:1657px;--fb:1384px} html[lang="en"] .fig[data-src$="fig-02-04-information-volume-growth.html"]{min-height:1020px;--fb:836px} html[lang="en"] .fig[data-src$="fig-02-05-twenty-five-minute-return-lag.html"]{min-height:1184px;--fb:982px} html[lang="en"] .fig[data-src$="fig-02-06-four-costs-of-switching.html"]{min-height:1897px;--fb:1695px} html[lang="en"] .fig[data-src$="fig-02-08-neural-processing-speed.html"]{min-height:894px;--fb:757px} html[lang="en"] .fig[data-src$="fig-02-09-attention-myths.html"]{min-height:1559px;--fb:1434px} html[lang="en"] .fig[data-src$="fig-03-01-dwell-time-by-format.html"]{min-height:845px;--fb:604px} html[lang="en"] .fig[data-src$="fig-03-02-attention-as-currency.html"]{min-height:1322px;--fb:1197px} html[lang="en"] .fig[data-src$="fig-03-03-digital-ad-attention-funnel.html"]{min-height:1267px;--fb:989px} html[lang="en"] .fig[data-src$="fig-03-04-platform-content-volume.html"]{min-height:1450px;--fb:1313px} html[lang="en"] .fig[data-src$="fig-03-05-engagement-vs-volume.html"]{min-height:1167px;--fb:964px} html[lang="en"] .fig[data-src$="fig-03-06-supply-vs-attention.html"]{min-height:1004px;--fb:867px} html[lang="en"] .fig[data-src$="fig-03-07-five-billion-users.html"]{min-height:1213px;--fb:1088px} html[lang="en"] .fig[data-src$="fig-03-08-four-laws.html"]{min-height:2092px;--fb:1890px} html[lang="en"] .fig[data-src$="fig-03-09-compound-signal-effect.html"]{min-height:1220px;--fb:1036px} html[lang="en"] .fig[data-src$="fig-03-10-brand-lift-roi.html"]{min-height:1250px;--fb:1082px} html[lang="en"] .fig[data-src$="fig-04-02-anatomy-of-1-5-seconds.html"]{min-height:1306px;--fb:1141px} html[lang="en"] .fig[data-src$="fig-04-03-the-gap.html"]{min-height:1183px;--fb:961px} html[lang="en"] .fig[data-src$="fig-04-04-one-thing-test.html"]{min-height:1943px;--fb:1793px} html[lang="en"] .fig[data-src$="fig-04-06-simplicity-vs-precision.html"]{min-height:1402px;--fb:1180px} html[lang="en"] .fig[data-src$="fig-04-07-micro-moment-to-system.html"]{min-height:2196px;--fb:2045px} html[lang="en"] .fig[data-src$="fig-05-01-recognition-hierarchy.html"]{min-height:1452px;--fb:1249px} html[lang="en"] .fig[data-src$="fig-05-02-color-you-can-own.html"]{min-height:1796px;--fb:1645px} html[lang="en"] .fig[data-src$="fig-05-03-the-deployment-error.html"]{min-height:1975px;--fb:1755px} html[lang="en"] .fig[data-src$="fig-05-04-three-tier-deployment.html"]{min-height:1690px;--fb:1469px} html[lang="en"] .fig[data-src$="fig-05-05-logo-vs-brand-system.html"]{min-height:2059px;--fb:1839px} html[lang="en"] .fig[data-src$="fig-05-06-design-for-the-millisecond.html"]{min-height:1804px;--fb:1584px} html[lang="en"] .fig[data-src$="fig-06-01-signal-vs-message.html"]{min-height:1421px;--fb:1199px} html[lang="en"] .fig[data-src$="fig-06-02-the-brief-built-backwards.html"]{min-height:1889px;--fb:1739px} html[lang="en"] .fig[data-src$="fig-06-03-inverted-process.html"]{min-height:1936px;--fb:1786px} html[lang="en"] .fig[data-src$="fig-06-04-signal-is-meaning-at-speed.html"]{min-height:2135px;--fb:1880px} html[lang="en"] .fig[data-src$="fig-06-05-the-invisible-line.html"]{min-height:1221px;--fb:999px} html[lang="en"] .fig[data-src$="fig-06-06-design-the-envelope.html"]{min-height:1988px;--fb:1837px} html[lang="en"] .fig[data-src$="fig-07-01-hero-vs-system.html"]{min-height:989px;--fb:805px} html[lang="en"] .fig[data-src$="fig-07-02-misaligned-incentives.html"]{min-height:2027px;--fb:1841px} html[lang="en"] .fig[data-src$="fig-07-03-fragmentation-reality.html"]{min-height:2101px;--fb:1898px} html[lang="en"] .fig[data-src$="fig-07-04-constants-vs-variables.html"]{min-height:1236px;--fb:1071px} html[lang="en"] .fig[data-src$="fig-07-05-atomic-brand-system.html"]{min-height:1368px;--fb:1184px} html[lang="en"] .fig[data-src$="fig-07-06-speed-as-strategy.html"]{min-height:1922px;--fb:1719px} html[lang="en"] .fig[data-src$="fig-07-07-brand-engineers.html"]{min-height:1065px;--fb:900px} html[lang="en"] .fig[data-src$="fig-07-08-system-is-the-strategy.html"]{min-height:2172px;--fb:1987px} html[lang="en"] .fig[data-src$="fig-08-01-the-translation-layer.html"]{min-height:1791px;--fb:1640px} html[lang="en"] .fig[data-src$="fig-08-02-translation-failures.html"]{min-height:2074px;--fb:1924px} html[lang="en"] .fig[data-src$="fig-08-03-transcription-vs-translation.html"]{min-height:1377px;--fb:1212px} html[lang="en"] .fig[data-src$="fig-08-04-four-skills-of-the-translator.html"]{min-height:2401px;--fb:2216px} html[lang="en"] .fig[data-src$="fig-08-05-cd-as-translator.html"]{min-height:1890px;--fb:1740px} html[lang="en"] .fig[data-src$="fig-08-06-framework-complete.html"]{min-height:1269px;--fb:1104px} html[lang="en"] .fig[data-src$="fig-09-01-what-the-brief-gets-wrong.html"]{min-height:1459px;--fb:1239px} html[lang="en"] .fig[data-src$="fig-09-02-five-questions-signal-brief.html"]{min-height:2226px;--fb:2041px} html[lang="en"] .fig[data-src$="fig-09-03-deliverable-vs-system.html"]{min-height:1010px;--fb:845px} html[lang="en"] .fig[data-src$="fig-09-04-signal-brief-vs-standard.html"]{min-height:1095px;--fb:930px} html[lang="en"] .fig[data-src$="fig-09-05-highest-leverage-change.html"]{min-height:1154px;--fb:1003px} html[lang="en"] .fig[data-src$="fig-10-01-impressions-are-broken.html"]{min-height:1406px;--fb:1203px} html[lang="en"] .fig[data-src$="fig-10-02-three-attention-metrics.html"]{min-height:2041px;--fb:1752px} html[lang="en"] .fig[data-src$="fig-10-03-apm-explained.html"]{min-height:1419px;--fb:1130px} html[lang="en"] .fig[data-src$="fig-10-04-active-vs-passive.html"]{min-height:1274px;--fb:996px} html[lang="en"] .fig[data-src$="fig-10-05-what-to-stop-measuring.html"]{min-height:1574px;--fb:1423px} html[lang="en"] .fig[data-src$="fig-10-06-metrics-misalignment.html"]{min-height:1254px;--fb:1103px} html[lang="en"] .fig[data-src$="fig-10-07-attention-roi.html"]{min-height:1523px;--fb:1355px} html[lang="en"] .fig[data-src$="fig-10-08-connecting-the-dots.html"]{min-height:1110px;--fb:832px} html[lang="en"] .fig[data-src$="fig-10-09-measurement-is-proof.html"]{min-height:1318px;--fb:1081px} html[lang="en"] .fig[data-src$="fig-11-01-from-campaigns-to-systems.html"]{min-height:964px;--fb:799px} html[lang="en"] .fig[data-src$="fig-11-02-auteur-to-architect.html"]{min-height:1081px;--fb:878px} html[lang="en"] .fig[data-src$="fig-11-03-iteration-velocity.html"]{min-height:1307px;--fb:1087px} html[lang="en"] .fig[data-src$="fig-11-04-hybrid-skill-set.html"]{min-height:1549px;--fb:1399px} html[lang="en"] .fig[data-src$="fig-11-05-team-structures.html"]{min-height:1036px;--fb:814px} html[lang="en"] .fig[data-src$="fig-11-06-precision-not-perfection.html"]{min-height:1522px;--fb:1336px} html[lang="en"] .fig[data-src$="fig-11-07-ship-with-confidence.html"]{min-height:1206px;--fb:1055px} html[lang="en"] .fig[data-src$="fig-11-08-building-for-the-scroll.html"]{min-height:1110px;--fb:960px} html[lang="en"] .fig[data-src$="fig-12-01-two-environments.html"]{min-height:1034px;--fb:850px} html[lang="en"] .fig[data-src$="fig-12-02-the-approval-paradox.html"]{min-height:1083px;--fb:918px} html[lang="en"] .fig[data-src$="fig-12-03-five-ways-to-close-the-gap.html"]{min-height:1865px;--fb:1680px} html[lang="en"] .fig[data-src$="fig-12-04-signal-vs-message-review.html"]{min-height:1048px;--fb:864px} html[lang="en"] .fig[data-src$="fig-12-05-the-new-standard.html"]{min-height:946px;--fb:795px} html[lang="en"] .fig[data-src$="fig-12-06-closing-data.html"]{min-height:1638px;--fb:1487px} html[lang="en"] .fig[data-src$="fig-12-07-the-scroll-is-the-brief.html"]{min-height:1120px;--fb:955px} html[lang="en"] .fig[data-src$="fig-12-08-full-framework.html"]{min-height:1681px;--fb:1530px} /* ---------- es ---------- */ html[lang="es"] .fig[data-src$="fig-01-01-captive-vs-earned-attention.html"]{min-height:1130px;--fb:852px} html[lang="es"] .fig[data-src$="fig-01-02-broadcast-operating-model.html"]{min-height:1707px;--fb:1557px} html[lang="es"] .fig[data-src$="fig-01-03-attention-evolution-timeline.html"]{min-height:749px;--fb:584px} html[lang="es"] .fig[data-src$="fig-01-04-content-supply-vs-attention.html"]{min-height:1074px;--fb:890px} html[lang="es"] .fig[data-src$="fig-01-05-the-room-vs-the-feed.html"]{min-height:1122px;--fb:825px} html[lang="es"] .fig[data-src$="fig-01-06-thirteen-hours-of-media.html"]{min-height:1228px;--fb:1063px} html[lang="es"] .fig[data-src$="fig-02-01-attention-duration-decline.html"]{min-height:1115px;--fb:893px} html[lang="es"] .fig[data-src$="fig-02-02-generational-attention.html"]{min-height:1439px;--fb:1219px} html[lang="es"] .fig[data-src$="fig-02-03-youth-focus-impact.html"]{min-height:1605px;--fb:1333px} html[lang="es"] .fig[data-src$="fig-02-04-information-volume-growth.html"]{min-height:1020px;--fb:836px} html[lang="es"] .fig[data-src$="fig-02-05-twenty-five-minute-return-lag.html"]{min-height:1247px;--fb:1062px} html[lang="es"] .fig[data-src$="fig-02-06-four-costs-of-switching.html"]{min-height:1897px;--fb:1695px} html[lang="es"] .fig[data-src$="fig-02-08-neural-processing-speed.html"]{min-height:894px;--fb:757px} html[lang="es"] .fig[data-src$="fig-02-09-attention-myths.html"]{min-height:1501px;--fb:1376px} html[lang="es"] .fig[data-src$="fig-03-01-dwell-time-by-format.html"]{min-height:871px;--fb:630px} html[lang="es"] .fig[data-src$="fig-03-02-attention-as-currency.html"]{min-height:1324px;--fb:1199px} html[lang="es"] .fig[data-src$="fig-03-03-digital-ad-attention-funnel.html"]{min-height:1267px;--fb:989px} html[lang="es"] .fig[data-src$="fig-03-04-platform-content-volume.html"]{min-height:1450px;--fb:1313px} html[lang="es"] .fig[data-src$="fig-03-05-engagement-vs-volume.html"]{min-height:1142px;--fb:939px} html[lang="es"] .fig[data-src$="fig-03-06-supply-vs-attention.html"]{min-height:1004px;--fb:867px} html[lang="es"] .fig[data-src$="fig-03-07-five-billion-users.html"]{min-height:1213px;--fb:1088px} html[lang="es"] .fig[data-src$="fig-03-08-four-laws.html"]{min-height:1985px;--fb:1782px} html[lang="es"] .fig[data-src$="fig-03-09-compound-signal-effect.html"]{min-height:1150px;--fb:1013px} html[lang="es"] .fig[data-src$="fig-03-10-brand-lift-roi.html"]{min-height:1224px;--fb:1056px} html[lang="es"] .fig[data-src$="fig-04-02-anatomy-of-1-5-seconds.html"]{min-height:1306px;--fb:1141px} html[lang="es"] .fig[data-src$="fig-04-03-the-gap.html"]{min-height:1146px;--fb:924px} html[lang="es"] .fig[data-src$="fig-04-04-one-thing-test.html"]{min-height:1892px;--fb:1742px} html[lang="es"] .fig[data-src$="fig-04-06-simplicity-vs-precision.html"]{min-height:1389px;--fb:1167px} html[lang="es"] .fig[data-src$="fig-04-07-micro-moment-to-system.html"]{min-height:2197px;--fb:2047px} html[lang="es"] .fig[data-src$="fig-05-01-recognition-hierarchy.html"]{min-height:1452px;--fb:1249px} html[lang="es"] .fig[data-src$="fig-05-02-color-you-can-own.html"]{min-height:1848px;--fb:1698px} html[lang="es"] .fig[data-src$="fig-05-03-the-deployment-error.html"]{min-height:1974px;--fb:1754px} html[lang="es"] .fig[data-src$="fig-05-04-three-tier-deployment.html"]{min-height:1664px;--fb:1444px} html[lang="es"] .fig[data-src$="fig-05-05-logo-vs-brand-system.html"]{min-height:1978px;--fb:1758px} html[lang="es"] .fig[data-src$="fig-05-06-design-for-the-millisecond.html"]{min-height:1804px;--fb:1584px} html[lang="es"] .fig[data-src$="fig-06-01-signal-vs-message.html"]{min-height:1421px;--fb:1199px} html[lang="es"] .fig[data-src$="fig-06-02-the-brief-built-backwards.html"]{min-height:1864px;--fb:1713px} html[lang="es"] .fig[data-src$="fig-06-03-inverted-process.html"]{min-height:1858px;--fb:1707px} html[lang="es"] .fig[data-src$="fig-06-04-signal-is-meaning-at-speed.html"]{min-height:2135px;--fb:1880px} html[lang="es"] .fig[data-src$="fig-06-05-the-invisible-line.html"]{min-height:1204px;--fb:982px} html[lang="es"] .fig[data-src$="fig-06-06-design-the-envelope.html"]{min-height:2044px;--fb:1893px} html[lang="es"] .fig[data-src$="fig-07-01-hero-vs-system.html"]{min-height:988px;--fb:804px} html[lang="es"] .fig[data-src$="fig-07-02-misaligned-incentives.html"]{min-height:1945px;--fb:1760px} html[lang="es"] .fig[data-src$="fig-07-03-fragmentation-reality.html"]{min-height:2091px;--fb:1889px} html[lang="es"] .fig[data-src$="fig-07-04-constants-vs-variables.html"]{min-height:1217px;--fb:1052px} html[lang="es"] .fig[data-src$="fig-07-05-atomic-brand-system.html"]{min-height:1346px;--fb:1162px} html[lang="es"] .fig[data-src$="fig-07-06-speed-as-strategy.html"]{min-height:1795px;--fb:1592px} html[lang="es"] .fig[data-src$="fig-07-07-brand-engineers.html"]{min-height:1065px;--fb:900px} html[lang="es"] .fig[data-src$="fig-07-08-system-is-the-strategy.html"]{min-height:2172px;--fb:1986px} html[lang="es"] .fig[data-src$="fig-08-01-the-translation-layer.html"]{min-height:1764px;--fb:1613px} html[lang="es"] .fig[data-src$="fig-08-02-translation-failures.html"]{min-height:1996px;--fb:1845px} html[lang="es"] .fig[data-src$="fig-08-03-transcription-vs-translation.html"]{min-height:1308px;--fb:1143px} html[lang="es"] .fig[data-src$="fig-08-04-four-skills-of-the-translator.html"]{min-height:2297px;--fb:2112px} html[lang="es"] .fig[data-src$="fig-08-05-cd-as-translator.html"]{min-height:1674px;--fb:1524px} html[lang="es"] .fig[data-src$="fig-08-06-framework-complete.html"]{min-height:1225px;--fb:1060px} html[lang="es"] .fig[data-src$="fig-09-01-what-the-brief-gets-wrong.html"]{min-height:1460px;--fb:1240px} html[lang="es"] .fig[data-src$="fig-09-02-five-questions-signal-brief.html"]{min-height:2196px;--fb:2010px} html[lang="es"] .fig[data-src$="fig-09-03-deliverable-vs-system.html"]{min-height:967px;--fb:802px} html[lang="es"] .fig[data-src$="fig-09-04-signal-brief-vs-standard.html"]{min-height:1095px;--fb:930px} html[lang="es"] .fig[data-src$="fig-09-05-highest-leverage-change.html"]{min-height:1167px;--fb:1017px} html[lang="es"] .fig[data-src$="fig-10-01-impressions-are-broken.html"]{min-height:1428px;--fb:1225px} html[lang="es"] .fig[data-src$="fig-10-02-three-attention-metrics.html"]{min-height:2092px;--fb:1803px} html[lang="es"] .fig[data-src$="fig-10-03-apm-explained.html"]{min-height:1419px;--fb:1130px} html[lang="es"] .fig[data-src$="fig-10-04-active-vs-passive.html"]{min-height:1297px;--fb:1019px} html[lang="es"] .fig[data-src$="fig-10-05-what-to-stop-measuring.html"]{min-height:1415px;--fb:1265px} html[lang="es"] .fig[data-src$="fig-10-06-metrics-misalignment.html"]{min-height:1254px;--fb:1103px} html[lang="es"] .fig[data-src$="fig-10-07-attention-roi.html"]{min-height:1622px;--fb:1454px} html[lang="es"] .fig[data-src$="fig-10-08-connecting-the-dots.html"]{min-height:1110px;--fb:832px} html[lang="es"] .fig[data-src$="fig-10-09-measurement-is-proof.html"]{min-height:1246px;--fb:1009px} html[lang="es"] .fig[data-src$="fig-11-01-from-campaigns-to-systems.html"]{min-height:964px;--fb:799px} html[lang="es"] .fig[data-src$="fig-11-02-auteur-to-architect.html"]{min-height:1102px;--fb:899px} html[lang="es"] .fig[data-src$="fig-11-03-iteration-velocity.html"]{min-height:1350px;--fb:1112px} html[lang="es"] .fig[data-src$="fig-11-04-hybrid-skill-set.html"]{min-height:1549px;--fb:1399px} html[lang="es"] .fig[data-src$="fig-11-05-team-structures.html"]{min-height:1015px;--fb:793px} html[lang="es"] .fig[data-src$="fig-11-06-precision-not-perfection.html"]{min-height:1457px;--fb:1271px} html[lang="es"] .fig[data-src$="fig-11-07-ship-with-confidence.html"]{min-height:1180px;--fb:1030px} html[lang="es"] .fig[data-src$="fig-11-08-building-for-the-scroll.html"]{min-height:1136px;--fb:985px} html[lang="es"] .fig[data-src$="fig-12-01-two-environments.html"]{min-height:1053px;--fb:850px} html[lang="es"] .fig[data-src$="fig-12-02-the-approval-paradox.html"]{min-height:1062px;--fb:897px} html[lang="es"] .fig[data-src$="fig-12-03-five-ways-to-close-the-gap.html"]{min-height:1813px;--fb:1627px} html[lang="es"] .fig[data-src$="fig-12-04-signal-vs-message-review.html"]{min-height:1022px;--fb:819px} html[lang="es"] .fig[data-src$="fig-12-05-the-new-standard.html"]{min-height:919px;--fb:768px} html[lang="es"] .fig[data-src$="fig-12-06-closing-data.html"]{min-height:1692px;--fb:1542px} html[lang="es"] .fig[data-src$="fig-12-07-the-scroll-is-the-brief.html"]{min-height:1093px;--fb:928px} html[lang="es"] .fig[data-src$="fig-12-08-full-framework.html"]{min-height:1681px;--fb:1530px} /* ========================================================================== OPCIONAL — LA APERTURA DEL CAPITULO (decide Andres) El H1 se compone en Archivo Black62, que es condensada (wdth 62). Mientras no ha llegado, la fuente de respaldo es mas ancha y una de las tres lineas se parte en dos: el titulo mide 4 lineas (299 px) y al llegar Archivo baja a 3 (224 px). Son 75 px de salto a los ~780 ms, justo al primer pintado. Chrome lo descarta del CLS (hadRecentInput), pero el lector lo ve. Cualquiera de las dos lineas lo elimina; medido: 0,0586 -> 0,0262 de movimiento total. Elegir UNA. A) el alto lo fija el numero de lineas que el generador ya escribe: .chapterhead h1{height:calc(var(--col-lines,3) * 0.94em);overflow:hidden} (con el respaldo, la cuarta linea queda recortada ~700 ms) B) las lineas del titulo no se parten nunca: .chapterhead h1 span{white-space:nowrap} .chapterhead h1{overflow:hidden} (con el respaldo, la linea mas larga se recorta a la derecha ~700 ms) ========================================================================== */ /* ========================================================================== D84 — RESERVA EXACTA A >=1200, ENCIMA DE LA RESERVA MAXIMA DE DIEGO. Su bloque reserva el MAXIMO de los tres anchos medidos, y hace bien: el alto de la figura varia de forma CONTINUA con el ancho, asi que reservar por breakpoint con valores muestreados dejaria crecer la figura en los anchos que nadie midio, y volveria el salto. El precio de reservar el maximo es que en escritorio sobra sitio: la 12.5 renderizaba una caja de 193 px para un dibujo de 76, o sea 117 px de crema muerta entre el dibujo y el filete que deberia cerrarlo. Eso no se lee como reserva, se lee como algo que no cargo, y es permanente. Por que aqui SI se puede ser exacto: a partir de 1200 la capa de vistazo mide siempre 686 px (--prose fijo, .fig a 900 dentro de --page 1040), asi que el alto NO depende del viewport. Comprobado midiendo el dibujo a 1200 y a 1440: 76 px en los dos. Un solo valor, sin muestreo y sin riesgo. Debajo de 1200 manda la reserva maxima, que es donde el ancho si varia. REMEDIDO 2026-09-25 tras R3 (suelo tipografico + modo lineal). La tabla anterior estaba medida cuando la figura entregaba un pie: las 170 filas se quedaban cortas, la peor por 1.947 px, y eso era el CLS de 2,35. 96 filas se apartan aqui. ========================================================================== */ @media (min-width:1200px){ html[lang="en"] .fig[data-src$="fig-01-02-broadcast-operating-model.html"]{min-height:1034px;--fb:869px} html[lang="en"] .fig[data-src$="fig-02-02-generational-attention.html"]{min-height:1157px;--fb:935px} html[lang="en"] .fig[data-src$="fig-02-03-youth-focus-impact.html"]{min-height:1193px;--fb:915px} html[lang="en"] .fig[data-src$="fig-02-05-twenty-five-minute-return-lag.html"]{min-height:1184px;--fb:981px} html[lang="en"] .fig[data-src$="fig-02-06-four-costs-of-switching.html"]{min-height:1326px;--fb:1123px} html[lang="en"] .fig[data-src$="fig-02-09-attention-myths.html"]{min-height:1029px;--fb:892px} html[lang="en"] .fig[data-src$="fig-03-02-attention-as-currency.html"]{min-height:974px;--fb:837px} html[lang="en"] .fig[data-src$="fig-03-07-five-billion-users.html"]{min-height:1036px;--fb:899px} html[lang="en"] .fig[data-src$="fig-03-08-four-laws.html"]{min-height:1371px;--fb:1149px} html[lang="en"] .fig[data-src$="fig-03-10-brand-lift-roi.html"]{min-height:1114px;--fb:930px} html[lang="en"] .fig[data-src$="fig-04-04-one-thing-test.html"]{min-height:1248px;--fb:1083px} html[lang="en"] .fig[data-src$="fig-04-07-micro-moment-to-system.html"]{min-height:1243px;--fb:1078px} html[lang="en"] .fig[data-src$="fig-05-02-color-you-can-own.html"]{min-height:1264px;--fb:1099px} html[lang="en"] .fig[data-src$="fig-05-03-the-deployment-error.html"]{min-height:1403px;--fb:1181px} html[lang="en"] .fig[data-src$="fig-05-04-three-tier-deployment.html"]{min-height:1395px;--fb:1173px} html[lang="en"] .fig[data-src$="fig-05-05-logo-vs-brand-system.html"]{min-height:1567px;--fb:1345px} html[lang="en"] .fig[data-src$="fig-05-06-design-for-the-millisecond.html"]{min-height:1456px;--fb:1234px} html[lang="en"] .fig[data-src$="fig-06-02-the-brief-built-backwards.html"]{min-height:1330px;--fb:1165px} html[lang="en"] .fig[data-src$="fig-06-03-inverted-process.html"]{min-height:1335px;--fb:1170px} html[lang="en"] .fig[data-src$="fig-06-04-signal-is-meaning-at-speed.html"]{min-height:1356px;--fb:1096px} html[lang="en"] .fig[data-src$="fig-06-06-design-the-envelope.html"]{min-height:1188px;--fb:1023px} html[lang="en"] .fig[data-src$="fig-07-02-misaligned-incentives.html"]{min-height:925px;--fb:722px} html[lang="en"] .fig[data-src$="fig-07-03-fragmentation-reality.html"]{min-height:1092px;--fb:889px} html[lang="en"] .fig[data-src$="fig-07-06-speed-as-strategy.html"]{min-height:1320px;--fb:1117px} html[lang="en"] .fig[data-src$="fig-07-08-system-is-the-strategy.html"]{min-height:1502px;--fb:1318px} html[lang="en"] .fig[data-src$="fig-08-01-the-translation-layer.html"]{min-height:1212px;--fb:1047px} html[lang="en"] .fig[data-src$="fig-08-02-translation-failures.html"]{min-height:1602px;--fb:1437px} html[lang="en"] .fig[data-src$="fig-08-04-four-skills-of-the-translator.html"]{min-height:1262px;--fb:1078px} html[lang="en"] .fig[data-src$="fig-08-05-cd-as-translator.html"]{min-height:1144px;--fb:979px} html[lang="en"] .fig[data-src$="fig-09-01-what-the-brief-gets-wrong.html"]{min-height:1047px;--fb:825px} html[lang="en"] .fig[data-src$="fig-09-02-five-questions-signal-brief.html"]{min-height:1405px;--fb:1221px} html[lang="en"] .fig[data-src$="fig-09-05-highest-leverage-change.html"]{min-height:987px;--fb:822px} html[lang="en"] .fig[data-src$="fig-10-01-impressions-are-broken.html"]{min-height:1196px;--fb:974px} html[lang="en"] .fig[data-src$="fig-10-02-three-attention-metrics.html"]{min-height:1374px;--fb:1096px} html[lang="en"] .fig[data-src$="fig-10-03-apm-explained.html"]{min-height:1136px;--fb:858px} html[lang="en"] .fig[data-src$="fig-10-05-what-to-stop-measuring.html"]{min-height:1378px;--fb:1213px} html[lang="en"] .fig[data-src$="fig-10-06-metrics-misalignment.html"]{min-height:1014px;--fb:849px} html[lang="en"] .fig[data-src$="fig-10-07-attention-roi.html"]{min-height:1140px;--fb:975px} html[lang="en"] .fig[data-src$="fig-10-09-measurement-is-proof.html"]{min-height:1040px;--fb:799px} html[lang="en"] .fig[data-src$="fig-11-03-iteration-velocity.html"]{min-height:1024px;--fb:802px} html[lang="en"] .fig[data-src$="fig-11-04-hybrid-skill-set.html"]{min-height:1258px;--fb:1093px} html[lang="en"] .fig[data-src$="fig-11-06-precision-not-perfection.html"]{min-height:1016px;--fb:813px} html[lang="en"] .fig[data-src$="fig-11-07-ship-with-confidence.html"]{min-height:863px;--fb:698px} html[lang="en"] .fig[data-src$="fig-11-08-building-for-the-scroll.html"]{min-height:810px;--fb:645px} html[lang="en"] .fig[data-src$="fig-12-03-five-ways-to-close-the-gap.html"]{min-height:1251px;--fb:1067px} html[lang="en"] .fig[data-src$="fig-12-05-the-new-standard.html"]{min-height:933px;--fb:768px} html[lang="en"] .fig[data-src$="fig-12-06-closing-data.html"]{min-height:1179px;--fb:1014px} html[lang="en"] .fig[data-src$="fig-12-08-full-framework.html"]{min-height:1070px;--fb:905px} html[lang="es"] .fig[data-src$="fig-01-02-broadcast-operating-model.html"]{min-height:1002px;--fb:837px} html[lang="es"] .fig[data-src$="fig-02-02-generational-attention.html"]{min-height:1157px;--fb:935px} html[lang="es"] .fig[data-src$="fig-02-03-youth-focus-impact.html"]{min-height:1174px;--fb:896px} html[lang="es"] .fig[data-src$="fig-02-05-twenty-five-minute-return-lag.html"]{min-height:1138px;--fb:935px} html[lang="es"] .fig[data-src$="fig-02-06-four-costs-of-switching.html"]{min-height:1346px;--fb:1143px} html[lang="es"] .fig[data-src$="fig-02-09-attention-myths.html"]{min-height:1029px;--fb:892px} html[lang="es"] .fig[data-src$="fig-03-02-attention-as-currency.html"]{min-height:974px;--fb:837px} html[lang="es"] .fig[data-src$="fig-03-07-five-billion-users.html"]{min-height:1019px;--fb:882px} html[lang="es"] .fig[data-src$="fig-03-08-four-laws.html"]{min-height:1328px;--fb:1125px} html[lang="es"] .fig[data-src$="fig-03-10-brand-lift-roi.html"]{min-height:1114px;--fb:930px} html[lang="es"] .fig[data-src$="fig-04-04-one-thing-test.html"]{min-height:1194px;--fb:1029px} html[lang="es"] .fig[data-src$="fig-04-07-micro-moment-to-system.html"]{min-height:1243px;--fb:1078px} html[lang="es"] .fig[data-src$="fig-05-02-color-you-can-own.html"]{min-height:1339px;--fb:1174px} html[lang="es"] .fig[data-src$="fig-05-03-the-deployment-error.html"]{min-height:1403px;--fb:1181px} html[lang="es"] .fig[data-src$="fig-05-04-three-tier-deployment.html"]{min-height:1395px;--fb:1173px} html[lang="es"] .fig[data-src$="fig-05-05-logo-vs-brand-system.html"]{min-height:1564px;--fb:1323px} html[lang="es"] .fig[data-src$="fig-05-06-design-for-the-millisecond.html"]{min-height:1456px;--fb:1234px} html[lang="es"] .fig[data-src$="fig-06-02-the-brief-built-backwards.html"]{min-height:1311px;--fb:1146px} html[lang="es"] .fig[data-src$="fig-06-03-inverted-process.html"]{min-height:1315px;--fb:1150px} html[lang="es"] .fig[data-src$="fig-06-04-signal-is-meaning-at-speed.html"]{min-height:1356px;--fb:1096px} html[lang="es"] .fig[data-src$="fig-06-06-design-the-envelope.html"]{min-height:1157px;--fb:992px} html[lang="es"] .fig[data-src$="fig-07-02-misaligned-incentives.html"]{min-height:903px;--fb:700px} html[lang="es"] .fig[data-src$="fig-07-03-fragmentation-reality.html"]{min-height:1008px;--fb:805px} html[lang="es"] .fig[data-src$="fig-07-06-speed-as-strategy.html"]{min-height:1320px;--fb:1117px} html[lang="es"] .fig[data-src$="fig-07-08-system-is-the-strategy.html"]{min-height:1476px;--fb:1292px} html[lang="es"] .fig[data-src$="fig-08-01-the-translation-layer.html"]{min-height:1189px;--fb:1024px} html[lang="es"] .fig[data-src$="fig-08-02-translation-failures.html"]{min-height:1486px;--fb:1321px} html[lang="es"] .fig[data-src$="fig-08-04-four-skills-of-the-translator.html"]{min-height:1221px;--fb:1018px} html[lang="es"] .fig[data-src$="fig-08-05-cd-as-translator.html"]{min-height:1067px;--fb:902px} html[lang="es"] .fig[data-src$="fig-09-01-what-the-brief-gets-wrong.html"]{min-height:1086px;--fb:864px} html[lang="es"] .fig[data-src$="fig-09-02-five-questions-signal-brief.html"]{min-height:1427px;--fb:1243px} html[lang="es"] .fig[data-src$="fig-09-05-highest-leverage-change.html"]{min-height:931px;--fb:766px} html[lang="es"] .fig[data-src$="fig-10-01-impressions-are-broken.html"]{min-height:1212px;--fb:990px} html[lang="es"] .fig[data-src$="fig-10-02-three-attention-metrics.html"]{min-height:1374px;--fb:1096px} html[lang="es"] .fig[data-src$="fig-10-03-apm-explained.html"]{min-height:1136px;--fb:858px} html[lang="es"] .fig[data-src$="fig-10-05-what-to-stop-measuring.html"]{min-height:1378px;--fb:1213px} html[lang="es"] .fig[data-src$="fig-10-06-metrics-misalignment.html"]{min-height:1035px;--fb:870px} html[lang="es"] .fig[data-src$="fig-10-07-attention-roi.html"]{min-height:1278px;--fb:1113px} html[lang="es"] .fig[data-src$="fig-10-09-measurement-is-proof.html"]{min-height:1040px;--fb:799px} html[lang="es"] .fig[data-src$="fig-11-03-iteration-velocity.html"]{min-height:1043px;--fb:802px} html[lang="es"] .fig[data-src$="fig-11-04-hybrid-skill-set.html"]{min-height:1258px;--fb:1093px} html[lang="es"] .fig[data-src$="fig-11-06-precision-not-perfection.html"]{min-height:1037px;--fb:834px} html[lang="es"] .fig[data-src$="fig-11-07-ship-with-confidence.html"]{min-height:863px;--fb:698px} html[lang="es"] .fig[data-src$="fig-11-08-building-for-the-scroll.html"]{min-height:791px;--fb:626px} html[lang="es"] .fig[data-src$="fig-12-03-five-ways-to-close-the-gap.html"]{min-height:1270px;--fb:1067px} html[lang="es"] .fig[data-src$="fig-12-05-the-new-standard.html"]{min-height:909px;--fb:744px} html[lang="es"] .fig[data-src$="fig-12-06-closing-data.html"]{min-height:1162px;--fb:997px} html[lang="es"] .fig[data-src$="fig-12-08-full-framework.html"]{min-height:1087px;--fb:922px} }