/* ============================================================ DE EXPERTO A CONSULTOR · Tokens del sistema de diseño · v2 Fuente única de verdad. Ningún valor de color, tamaño o espacio debería escribirse fuera de este archivo. ============================================================ */ :root{ /* ---------- COLOR · superficie oscura ---------- */ --azul-900:#08161F; /* profundidad, extremos del degradado */ --azul-800:#0B1F2E; /* superficie oscura base */ --azul-700:#143A50; /* paneles y punto claro del degradado */ --azul-600:#1B4A63; /* bordes sobre oscuro */ --azul-linea:#1B4359; /* filetes de encabezado y pie sobre oscuro */ --azul-centro:#0A1B26;/* centro de la viñeta de .osc.interior */ --azul-cierre:#091B27;/* extremo inferior del degradado de portada */ /* ---------- COLOR · superficie clara ---------- */ --papel:#F4F7F9; /* superficie clara base */ --papel-panel:#E8EFF3;/* paneles sobre papel */ --papel-linea:#CBD9E1;/* filetes sobre papel */ --papel-oro:#FFFDF6; /* fondo de la zona destacada del diagrama */ /* ---------- COLOR · tinta ---------- */ --blanco:#FFFFFF; /* titulares y texto sobre oscuro */ --acero-claro:#B9CFDD;/* lectura larga sobre oscuro */ --acero:#8FB3C7; /* secundario sobre papel y uso general */ --acero-interior:#A9C3D3;/* secundario sobre .osc.interior — el acero estándar no alcanza 4,5:1 en el borde claro del degradado invertido (mide 4,28) */ --tinta:#0B1F2E; /* titulares sobre papel */ --tinta-cuerpo:#22343F;/* lectura larga sobre papel */ --tinta-2:#4A6577; /* secundario sobre papel */ /* ---------- COLOR · acento ---------- */ --ambar:#F2B441; /* acento sobre oscuro */ --ambar-osc:#C88F26; /* acento sobre papel */ --ambar-cl:#FFD98A; /* solo hover y degradados */ /* ---------- COLOR · oro metálico ---------- El oro NO es un color: es un degradado. Estas son sus paradas, nombradas porque se reescriben a mano dentro de los SVG (un degradado CSS no se puede usar como relleno en SVG) y sin nombre quedaban como colores sueltos que el verificador marcaba. El centro de la rampa es --ambar exacto: el oro es el ámbar del sistema con relieve, no un color nuevo. */ --oro-bajo:#B8821E; /* extremo oscuro · 5,00 sobre azul-800 */ --oro-alto:#FEF0CD; /* destello 14,85 sobre azul-800 */ --oro-sombra:#4A3A12; /* sombra proyectada del signo $ */ /* ---------- UTILIDAD ---------- */ --fondo-taller:#3A4A55;/* mesa gris detrás de las páginas al ver el HTML en pantalla. No se imprime. */ /* ---------- DEGRADADOS ---------- */ --campo-oscuro:linear-gradient(168deg,#08161F 0%,#143A50 56%,#091B27 100%); --filete-ambar:linear-gradient(90deg,#8A5A12,#F2B441 38%,#FFD98A 60%,#B0741A); /* Oro metálico. --oro-texto se repite a lo largo del eje del degradado y produce varios reflejos; --oro-linea lleva uno solo, porque a 2 px de alto los reflejos múltiples se leen como un rosario de cuentas. Ver SISTEMA.md §11 antes de tocarlos. */ --oro-texto:repeating-linear-gradient(135deg, var(--oro-bajo) 0, var(--ambar) .525em, var(--oro-alto) .875em, var(--ambar) 1.225em, var(--oro-bajo) 1.75em); --oro-linea:linear-gradient(135deg, var(--oro-bajo) 0%, var(--ambar) 30%, var(--oro-alto) 50%, var(--ambar) 70%, var(--oro-bajo) 100%); /* ---------- TIPOGRAFÍA ---------- */ --display:'Montserrat',system-ui,sans-serif; /* lo que se mira */ --lectura:'Source Sans 3',system-ui,sans-serif;/* lo que se lee */ /* ---------- ESPACIADO · web (px) ---------- */ --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px; /* ---------- RADIOS ---------- */ --r-chico:10px; --r-medio:18px; --r-pill:999px; /* ---------- MOVIMIENTO · web ---------- Ver docs/MOVIMIENTO.md. Nada de duraciones ni curvas sueltas en el código: todo lo que anima algo vive acá. Se agregan solo los tokens que ya tienen uso real en la pieza — no el set completo por completitud (ver docs/MOVIMIENTO.md §2 para el resto). */ --mov-y:18px; /* desplazamiento de entrada, vertical */ --mov-escala:.985; /* escala de entrada — "se asienta" */ --mov-lento:620ms; /* A · duración de entrada de un bloque de página */ --mov-rapido:160ms; /* C · respuesta; reutilizado acá para el golpe del sello */ --mov-medio:320ms; /* B · aparición de bloque; reutilizado para el anillo del sello */ --curva-entra:cubic-bezier(.16,1,.3,1); /* frena al final: se asienta */ --curva-sale:cubic-bezier(.7,0,.84,0); /* acelera al salir — MOVIMIENTO.md §7 */ --curva-suave:cubic-bezier(.65,0,.35,1); /* simétrica — reflejo del oro */ --curva-sello:cubic-bezier(.34,1.56,.64,1);/* pasa de largo y vuelve: impacto */ --mov-x:28px; /* desplazamiento horizontal — paso de página, MOVIMIENTO.md §7 */ --mov-visto:240ms; /* C · el visto bueno del contador, MOVIMIENTO.md §8 */ --mov-paso:90ms; /* escalonado — documentado en MOVIMIENTO.md §2, sin uso real hasta Fase 2: la portada terminó con retardos nombrados (--esc-*) y no lo necesitó. La lección sí, para escalonar el cromo (.run, .foot) al llegar — ver componentes.css */ --mov-escena:1400ms; /* documentado en MOVIMIENTO.md §5 ("el brillo del campo") y nunca usado — hasta CAMBIOS.md v5, que le agrega el mismo desplazamiento leve de fondo, una sola vez, a portada y lección por igual */ /* Coreografía de portada · v4, tercera revisión en vivo con el socio (01-09-2026). Ya no es una sola cadena de retardos: desde el tipeo de la bajada, corren DOS hilos en paralelo que se reencuentran en el botón: Hilo texto: etq → l1 → l2 (con desenfoque) + reflejo + destello → filete de arriba → bajada tipeada letra por letra (el paso entre letras vive en app.html, no acá, porque depende de cuántos caracteres tenga el texto) Hilo sello: el sello entra e independiente de si el tipeo ya terminó → se estampa en su lugar → galvaniza a acero → el pie (filete + textos) aparece El botón espera al MÁS LENTO de los dos hilos — en la práctica, casi siempre el tipeo — y ese enganche lo resuelve JS agregando una clase cuando la última letra termina de aparecer, no un retardo fijo acá (ver app.html). Todo lo que se anima va por transform/opacity/filter(blur) salvo el reflejo (background-position); ambas excepciones documentadas donde se usan, mismo criterio que §3: una vez, un elemento, corta, termina plana. */ --esc-etq:200ms; --esc-l1:550ms; --esc-l2:900ms; --dur-l2:1000ms; /* "zona de valor" se desenfoca en 1s completo, a propósito más lento que el resto — reflejo, destello y filete NO se atrasan por esto: sus --esc-* son horas de reloj fijas, no "después de que termine l2" */ --esc-reflejo:1150ms; --dur-reflejo:650ms; --esc-destello:1700ms; --dur-destello:600ms; /* crece y se achica hasta desaparecer del todo */ --esc-filete:1700ms; --dur-filete:450ms; --esc-dek:2250ms; /* cuándo empieza a tipear la primera letra */ --dur-letra:160ms; /* cuánto tarda CADA letra en aparecer (--mov-rapido) */ --esc-sello:2250ms; /* el sello entra a la par del tipeo, no después */ --dur-sello-entra:1000ms; /* se achica de gigante a su lugar final, seco */ --esc-galvaniza:3250ms; /* apenas aterriza, empieza a virar a acero y a fantasma */ --dur-galvaniza:1300ms; /* respaldo si --dur-tipeo-calc no llegara a fijarse por JS; en uso real la pisa app.html con lo que demora el tipeo completo, para que las dos cosas terminen juntas */ --esc-pie:3400ms; /* filete de abajo + textos, ya con el sello en su sitio */ --dur-pie:650ms; --dur-cierre:550ms; /* el botón, activado por JS — ver .lista en app.html */ } /* ============================================================ ESCALA TIPOGRÁFICA WEB · rem La escala de arriba (cqw) está atada a la proporción A4: en un teléfono de 390px el cuerpo quedaría en 9,75px. Esta es nueva, pensada para 390 / 820 / 1440px, y no toca la de A4 — son dos piezas distintas que nunca comparten documento. Usa clamp() en vez de breakpoints propios donde el tamaño solo necesita crecer con el ancho; los quiebres de layout (640/1024px, ver docs/ENCARGO_01.md regla dura #4) siguen viviendo en cada pieza. ============================================================ */ :root{ --web-etq: .8125rem; /* 13px, etiqueta de sección */ --web-tt: clamp(2.5rem, 5vw + 1rem, 4.75rem); /* titular de portada */ --web-dek: clamp(1.0625rem, 1.5vw + .75rem, 1.375rem); /* entradilla */ --web-foot: .75rem; /* pie corrido, 12px */ /* Faltaban estos cuatro cuando se escribió el bloque de arriba: la Fase 1 solo necesitaba el rótulo, el titular, la entradilla y el pie de la PORTADA. La Fase 2 lee el resto de la página con la escala de A4 sin tocar (h3, h4, p, .gancho, los rótulos de recuadro, los cuadrantes) — que en cqw, dentro de un contenedor de 360px, da cuerpo a 13px y rótulos a 5px. Ilegible sin hacer zoom. Iba a pasar tarde o temprano en cualquier bloque de lectura nuevo; pasó en la 2.1 primero. */ --web-h3: clamp(1.75rem, 1.1vw + 1.5rem, 2.25rem); /* titular de lección */ --web-h4: clamp(1.125rem, .5vw + 1rem, 1.375rem); /* subtítulo, "Lista N ·" */ --web-gancho: clamp(1.125rem, .6vw + 1rem, 1.375rem); /* cita de apertura */ --web-p: clamp(1rem, .2vw + .95rem, 1.125rem); /* cuerpo de lectura */ --web-rotulo: .75rem; /* LA CLAVE, EJEMPLO, LISTA 1… */ --web-cuadrantes-valor: clamp(1.0625rem, .4vw + .95rem, 1.25rem); /* "Sé hacer" etc. */ } /* ============================================================ ESCALA TIPOGRÁFICA EN A4 Unidad: cqw = 1% del ancho de página. Mantiene las proporciones idénticas a cualquier escala de visualización. ============================================================ Revisada en V5. La regla que la fijó: los TITULARES Y CIFRAS van al tamaño grande, el CUERPO a un punto intermedio y el CROMO (encabezado, pie, rótulos de recuadro) al tamaño chico. Subir el cuerpo y mantener el aire a la vez no cabe en A4 — ver SISTEMA.md §10. titular de portada display 900 11.2 cqw tracking -.026em, interlineado 1.02 titular de módulo display 900 9.6 cqw tracking -.024em, interlineado 1.03 titular de lección display 800 5.1 cqw tracking -.018em, interlineado 1.10 subtítulo display 800 2.9 cqw cifra fantasma display 900 34 cqw blanco al 7%, esquina inferior etiqueta de sección display 700 1.75 cqw tracking .22em, mayúsculas encabezado display 700 1.55 cqw tracking .19em, mayúsculas pie display 700 1.5 cqw tracking .19em, mayúsculas rótulo de recuadro display 800 1.65 cqw tracking .19em, mayúsculas entradilla lectura 400 3.2 cqw máx. 40 caracteres, izquierda cuerpo lectura 400 2.55 cqw interlineado 1.58, sin tope de ancho gancho display 600 3.15 cqw máx. 46 caracteres, izquierda tabla lectura 400 2.45 cqw nota lectura 400 2.15 cqw itálica, izquierda ============================================================ ALINEACIÓN: todo el texto va a la izquierda. Nada se justifica (ver SISTEMA.md). El cuerpo y las listas no llevan max-width en ch — fluyen al ancho completo del contenedor. Los bloques de énfasis breve (entradilla, gancho, nota) sí mantienen un tope en caracteres, porque son cita/subtítulo, no prosa de lectura. ============================================================ RETÍCULA A4 proporción 1:1.414 · márgenes 6.0cqw vertical, 7.4cqw horizontal área de contenido con padding extra de 4.2cqw arriba y abajo ============================================================ TIPOGRAFÍAS: se incrustan en base64 en cada pieza exportada, nunca por a Google Fonts. Ver SISTEMA.md — "Fuentes incrustadas" para el procedimiento completo. ============================================================ */