/* ========================================================================== Tokens tipográficos — Grupo Frisa ESG Capa tipográfica de homologación con el sistema corporativo (Opción A). Set libre (SIL OFL) lo más cercano posible al sistema Lineto del corporativo. Migración futura a Lineto = cambiar SOLO estos 3 valores: Archivo → LL Sub Inter → Unica 77 IBM Plex Mono → Unica 77 Mono IMPORTANTE: cargar como ÚLTIMA hoja de estilos para ganar el mapeo de --font-family-elementia (tania.min.css redefine esa variable a Muller-Regular en un :root activo y se carga antes que este archivo). Solo propiedades de texto: NO toca layout, caja, retícula ni componentes. ========================================================================== */ :root { --font-display: 'Archivo', sans-serif; /* titulares / encabezados */ --font-body: 'Inter', sans-serif; /* cuerpo / texto corrido */ --font-mono: 'IBM Plex Mono', monospace; /* etiquetas / kickers / metadatos */ /* Mapea la palanca global del micrositio al cuerpo homologado. */ --font-family-elementia: var(--font-body); } /* Escala de cuerpo. El tema base fija `body, .dropdown-menu { font-size: .875rem }` (14px) en css/style.css:122, que dejaba el texto corrido demasiado chico. Por que aqui y no en style.css: esta hoja se carga al final (partials/styles.html), asi que gana la cascada con la misma especificidad y sin !important, y el valor del tema queda intacto para poder revertirlo. POR QUE NO SE SUBE EL font-size DEL , que seria lo evidente para "agrandar todo": medido sobre las hojas activas, 429 de 496 declaraciones de font-size estan en px (86%) y solo 45 en rem. Subir la raiz escalaria menos del 10% del texto y descuadraria las proporciones del tema, dejando unas cosas grandes y otras igual. En cambio ~80% de los caracteres de una pagina heredan de body, que es justo lo que escala esta variable. Es responsivo a proposito: 18px da la lectura comoda que se busca en escritorio, pero en un telefono de 360px dejaria lineas de ~31 caracteres, demasiado cortas. El clamp da 16px en movil, ~17 en tableta y 18px de ~1200px en adelante. Los componentes que deben crecer con el cuerpo (.asg-lead, .asg-subh, chips, .cap-table) estan en em, no en rem, justamente para que la jerarquia se mantenga en cualquiera de esos tamanos. Los titulares y las cifras grandes siguen en rem/clamp y no se mueven. */ :root { --font-size-body: clamp(1rem, 0.9rem + 0.3vw, 1.125rem); /* 16px movil -> 18px escritorio. Antes: .875rem (14px) */ /* Medida de lectura (longitud de linea maxima del texto corrido). Medido en el navegador antes de fijarlo: los parrafos a ancho de contenedor ocupaban 1270px, que a este cuerpo son ~143 caracteres por linea. El rango comodo de lectura es 55-75. Con 40rem quedan ~72. La densidad del sitio venia de la longitud de linea, no del tamano. */ /* Se expresa en funcion del cuerpo, no en rem fijos: asi la cantidad de caracteres por linea se mantiene constante (~72) aunque el cuerpo pase de 16 a 18px. Con 40rem fijos las lineas se acortaban a 64 caracteres al crecer la letra y el bloque se veia mas estrecho. Va como una unica longitud calculada, no en `em`, para que todos los bloques (.asg-lead, .asg-prose, .asg-stats, chips) compartan exactamente el mismo ancho: en `em` cada uno lo resolveria contra su propio tamano y los bordes izquierdos dejarian de alinear. */ --measure-prose: calc(40 * var(--font-size-body)); } /* Cuerpo homologado (catch-all para elementos que no usan la variable). */ body { font-family: var(--font-body); font-size: var(--font-size-body); } .dropdown-menu { font-size: var(--font-size-body); } /* Titulares en la fuente display. Se preservan tamaños/espaciado existentes. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }