/* sitio-tokens.css — la letra de repos.mx (E23-33). Capa de tokens SÓLO para las páginas públicas del sitio: la portada, el precio, /comprar, las páginas legales y las landings de /landing. Va DESPUÉS de repos-tokens.css (el color, la forma y Hanken/Plex siguen saliendo de ahí) y nadie más la carga: la Caja (ReposApp), reportes.repos.mx, /admin, la ayuda y el menú digital no cambian de letra. Por qué vive aquí y no en repos-tokens.css: la de la nube es una COPIA que el build trae de ReposApp (target CopiarIdentidadCompartida, está en .gitignore). Una letra que sólo usa el sitio no tiene por qué viajar a la Caja. verificar_identidad_visual.py la trata como hoja de tokens: ninguna otra hoja puede redeclarar un --sitio-*. Una landing subida a mano (Landings//index.html) la usa así: y escribe font-family: var(--sitio-letra-voz) / font-size: var(--sitio-t-…). Nada de Google Fonts: el visitante no le entrega su IP a Google. La elección (Piazzolla) y lo que se descartó: docs/IDENTIDAD_REPOS.md. */ /* Piazzolla — Huerta Tipográfica (Argentina), SIL OFL 1.1. Variable, recortada a peso 400–700 y tamaño óptico 14–30 (fuentes/README.md). Un solo archivo latin cubre títulos y texto: el eje opsz lo mueve el navegador con el tamaño (font-optical-sizing: auto), afinando el contraste en los titulares y abriendo la letra en el cuerpo. latin-ext sólo se baja si hace falta. font-display: swap — se lee de inmediato con Georgia y se recompone al llegar; un anuncio que tarda en mostrar su titular pierde al visitante. */ @font-face { font-family: "Piazzolla"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../sitio/fuentes/piazzolla-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Piazzolla"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../sitio/fuentes/piazzolla-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- Familias. La voz del sitio es la serifa; lo que se toca (botones, campos, la barra, las maquetas de la Caja y del correo) habla como el producto, en Hanken; claves y huellas siguen en Plex Mono. --- */ --sitio-letra-voz: "Piazzolla", Georgia, "Times New Roman", serif; --sitio-letra-interfaz: var(--repos-font); --sitio-letra-tecnica: var(--repos-font-mono); /* --- Pesos. Bajan al subir el tamaño: un titular de 68 px en 700 se ve tosco, y uno de 20 px en 500 se pierde junto al texto. --- */ --sitio-peso-texto: 400; --sitio-peso-enfasis: 600; --sitio-peso-portada: 500; --sitio-peso-titulo: 580; --sitio-peso-subtitulo: 640; /* --- Cifras. Piazzolla trae un solo juego de números, de altura de versal y un poco más bajos que las mayúsculas: el precio no grita. tabular-nums donde se suman o se comparan (resumen de la compra). --- */ --sitio-cifras: lining-nums tabular-nums; /* --- Escala. Temperada, como un bandoneón: cada tamaño es la base multiplicada por 2^(n/12), n en semitonos. Base 17 px (el cuerpo; en el celular no baja de 16). El texto avanza por TONOS ENTEROS (×1.122): pasos chicos, porque entre una nota al pie y el cuerpo la diferencia tiene que notarse sin brincar. Los títulos suben por el ARPEGIO DE UN ACORDE MENOR (tercera menor, quinta, octava: ×1.189, ×1.260, ×1.335…): saltos que no son iguales entre sí, y por eso la jerarquía no se lee como una plantilla de 16/20/ 24/32/48 ni como una razón única de 1.25 o 1.333. n px uso −6 12.02 dentro de maquetas y sellos (no es texto de lectura) −4 13.49 notas, errores de campo, etiquetas −2 15.15 texto de apoyo, listas compactas, pie 0 17.00 cuerpo, campos, barra +2 19.08 entradillas, botón grande, títulos chicos +3 20.22 subtítulos (tercera menor) +7 25.47 títulos de tarjeta, totales (quinta) +12 34.00 títulos de sección (octava) +15 40.43 título de página; portada en el celular +19 50.94 portada junto a la captura +24 68.00 portada a lo ancho; precio grande +31 101.88 el precio como cartel Los fluidos van de la nota baja (pantalla de 360 px) a la alta (1120 px) en línea recta: un título de sección es una quinta en el celular y una octava en el escritorio. */ --sitio-t-diminuta: 12.02px; --sitio-t-nota: 13.49px; --sitio-t-apoyo: 15.15px; --sitio-t-texto: 17px; --sitio-t-realce: 19.08px; --sitio-t-subtitulo: 20.22px; --sitio-t-titulo: 25.47px; --sitio-t-seccion: clamp(25.47px, 21.43px + 1.122vw, 34px); --sitio-t-pagina: clamp(34px, 30.95px + 0.846vw, 40.43px); --sitio-t-portada: clamp(40.43px, 27.38px + 3.627vw, 68px); --sitio-t-portada-junto: 50.94px; --sitio-t-precio: clamp(50.94px, 42.86px + 2.244vw, 68px); --sitio-t-cartel: clamp(68px, 51.95px + 4.459vw, 101.88px); /* --- Interlínea e interletra. La serifa pide más aire que la grotesca en el cuerpo y menos en los titulares; la interletra negativa sólo en tamaños de portada, donde el opsz ya cerró la letra. --- */ --sitio-interlinea-texto: 1.6; --sitio-interlinea-apoyo: 1.5; --sitio-interlinea-titulo: 1.12; --sitio-interlinea-portada: 1.04; --sitio-interletra-titulo: -0.005em; --sitio-interletra-portada: -0.018em; --sitio-interletra-etiqueta: 0.14em; /* --- Medida. ~65 caracteres por renglón como tope del texto corrido. --- */ --sitio-medida: 64ch; }