/* ============================================================================= FUNRAICES E.C.E. — SISTEMA DE DISEÑO v2 «La línea que no se rompe» ----------------------------------------------------------------------------- Una curva de nivel y una costura de injerto son la misma marca: una línea que revela una unión. Aquí esa línea lo dibuja todo — el relieve del hero, la huella de cada territorio, el filete entre secciones, el subrayado de un enlace, el eje del método, la barra de avance del scroll. No se rompe nunca. REGLA DURA: ningún componente escribe un valor visual suelto. Si falta un token, se agrega aquí y se anota en docs/BITACORA.md. Contrastes: calculados con la fórmula WCAG 2.x de luminancia relativa (docs/contraste.awk), no estimados a ojo. El ratio va anotado en cada color que puede llevar texto. ============================================================================= */ /* ----------------------------------------------------------------------------- 1 · TIPOGRAFÍA — una superfamilia, tres voces. 85,3 KB medidos. Alegreya y Alegreya Sans son hermanas, de Huerta Tipográfica (Argentina). Alegreya está diseñada para literatura larga en español. Que sean familia es el argumento: una sola mano tipográfica en tres registros, no tres marcas distintas peleando. Subconjuntadas al juego real de glifos ES + EN por la API de Google Fonts y autoalojadas. Ambas familias son SIL OFL 1.1 — ver assets/fuentes/LICENCIAS.md Inter y Space Grotesk quedan fuera por instrucción del encargo: son el acabado por defecto de todo sitio generado. -------------------------------------------------------------------------------*/ @font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400 900; /* variable: un archivo cubre todo el rango */ font-display: swap; src: url("assets/fuentes/alegreya-var.woff2") format("woff2"); } @font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fuentes/alegreya-sans-500.woff2") format("woff2"); } @font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fuentes/alegreya-sans-700.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fuentes/plex-mono-400.woff2") format("woff2"); } :root { /* =========================================================================== 2 · PALETA CRUDA Los siete del encargo, más los que la escena tridimensional necesita. No se usan directamente en los componentes: se usan a través de los roles semánticos del bloque 3. ========================================================================= */ --cal-viva: #EDEFE9; /* Fondo claro. Cal encalada del altiplano caucano, que a plena luz tira a gris vegetal. NO es crema: el crema #F4F1EA con serif y terracota es el acabado por defecto de cualquier generador. */ --sombra-monte: #16241C; /* Tinta, fondo oscuro Y CIELO DE LA ESCENA. Que el cielo sea el color de la tinta es lo que hace que el canvas no tenga borde. 13,91:1 */ --verde-territorio: #3D6B4F; /* 5,31:1 sobre cal viva — acento vivo */ --cambium: #A9B58C; /* 1,87:1 — DECORATIVO, nunca texto */ --oro-injerto: #B8924C; /* 2,50:1 — NUNCA texto sobre claro. 5,57:1 sobre sombra de monte — ahí sí. Es la costura, y es la curva de nivel. */ --corteza: #5A4433; /* 7,85:1 sobre cal viva — rótulos */ --grafito: #585D56; /* 5,82:1 sobre cal viva — texto secundario */ /* Atmósfera y relieve — lo que la escena necesita y la paleta no tenía */ --cielo-cenit: #0A130F; /* Lo alto del cielo, y el velo del hero */ --cielo-horizonte: #2C3B2E; /* Banda del horizonte */ --cielo-brasa: #7A6238; /* De dónde viene la luz. Apagado, nunca naranja */ --neblina: #A4B2A2; /* 7,27:1 sobre sombra de monte */ --neblina-honda: #4A5A50; /* Neblina de cañada */ --luz-filo: #D2B071; /* 7,82:1 sobre sombra de monte — la curva encendida por el sol. Es también el techo de luminancia del sombreador: ningún píxel de la escena puede ser más claro que esto. */ --ladera-luz: #587355; /* 3,07:1 — solo superficie, nunca texto */ --ladera-umbria: #1A2A22; /* Ladera en sombra */ --agua: #1E3B37; /* Los ríos del Iró */ --agua-luz: #4C7D70; /* 3,43:1 — solo superficie */ /* Derivados — los de arriba no alcanzan para cubrir estados manteniendo AA */ --cal-alta: #F6F7F3; --cal-honda: #E2E6DD; --monte-alto: #1F3128; --monte-hondo: #0E1712; --verde-hondo: #2E5540; /* 7,28:1 sobre cal viva — hover sobre claro */ --verde-alto: #6F9E7F; /* 5,27:1 sobre sombra de monte */ --verde-mas-alto: #8CB89A; /* 7,24:1 sobre sombra de monte — hover oscuro */ --hueso: #C3C9BE; /* 9,53:1 sobre sombra de monte */ --ceniza: #9AA097; /* 6,02:1 sobre sombra de monte */ --filete-claro: #D3D8CC; --filete-oscuro: #2B3B31; --filete-fuerte: #7D8479; /* 3,33:1 — borde de control, mínimo no textual */ /* =========================================================================== 3 · ROLES SEMÁNTICOS — contexto claro (por defecto) Los componentes usan SOLO estos. Una sección oscura se marca con [data-fondo="oscuro"] y todo se recalcula solo, incluido el anillo de foco. ========================================================================= */ --fondo: var(--cal-viva); --fondo-alto: var(--cal-alta); --fondo-hondo: var(--cal-honda); --tinta: var(--sombra-monte); /* 13,91:1 */ --tinta-media: #3A443C; /* 8,75:1 */ --tinta-tenue: var(--grafito); /* 5,82:1 */ --acento: var(--verde-territorio); /* 5,31:1 */ --acento-activo: var(--verde-hondo); /* 7,28:1 */ --rotulo: var(--corteza); /* 7,85:1 */ --linea: var(--oro-injerto); /* la línea. decorativa aquí */ --linea-texto: var(--corteza); /* cuando la línea tendría que ser texto sobre claro, se usa corteza: misma familia, 7,85:1 */ --filete: var(--filete-claro); --filete-control: var(--filete-fuerte); --velo: rgba(22, 36, 28, .06); /* Velo del hero. El sombreador limita el píxel más brillante posible a --luz-filo, y el degradado del velo no baja del 72 % en toda la franja donde hay texto. Eso acota el contraste por abajo. No es un cálculo teórico: se midió sobre los píxeles realmente pintados, en 64 combinaciones de posición del sol y avance de scroll, sobre la caja exacta que ocupa el texto del hero. ancho 1440x900 → cal viva 9,77:1 · oro alto 5,49:1 móvil 375x812 → cal viva 9,17:1 · oro alto 5,16:1 La primera medición dio 5,12:1 porque la parada del 72 % estaba en el 34 % del ancho y el final del titular caía sobre un velo de ~0,43. Se corrigió el degradado, no la afirmación. */ --velo-escena: rgba(10, 19, 15, .72); /* =========================================================================== 4 · TIPOGRAFÍA APLICADA Rango amplio a propósito: el titular del hero y el de una sección interior se llevan más de 2×. ========================================================================= */ --letra-lectura: "Alegreya", ui-serif, Georgia, "Times New Roman", serif; --letra-ui: "Alegreya Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --letra-dato: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* A 7,2vw el titular se comía la pantalla entera a 1440x900 y los dos contadores —que son la prueba verificable del hero— caían bajo el pliegue. Sigue siendo más del doble que un titular de sección, que es lo que pide el encargo, pero ahora cabe el bloque completo. */ --t-hero: clamp(2.4rem, 5.2vw, 4.9rem); --t-escala: clamp(3.6rem, 13.0vw, 12rem); --t-seccion: clamp(1.85rem, 3.5vw, 3.3rem); --t-silencio: clamp(1.6rem, 4.4vw, 3.6rem); --t-sub: clamp(1.15rem, 1.6vw, 1.5rem); --t-cuerpo: clamp(1.0625rem, 1.05vw, 1.1875rem); --t-menor: .9375rem; --t-rotulo: .75rem; --t-dato: .8125rem; --alto-apretado: 1.04; --alto-titular: 1.12; --alto-lectura: 1.62; /* =========================================================================== 5 · RETÍCULA, ESPACIO Y RITMO ========================================================================= */ --ancho-tronco: 78rem; /* el contenedor mayor */ --ancho-lectura: 38rem; /* medida de lectura cómoda en español */ --margen: clamp(1.25rem, 5vw, 5rem); --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem; --e8: 4rem; --e9: 6rem; --e10: 8rem; --aire-seccion: clamp(4.5rem, 11vh, 9rem); /* =========================================================================== 6 · TRAZO, FORMA Y MOVIMIENTO Nada de border-radius uniforme en todo: el radio se gana, no se reparte. Las superficies del territorio son rectas; solo los controles se redondean. ========================================================================= */ --trazo-fino: 1px; --trazo-linea: 2px; --trazo-grueso: 3px; --radio-control: 2px; --radio-nulo: 0; --sombra-carta: 0 1px 0 rgba(22,36,28,.05), 0 12px 28px -18px rgba(22,36,28,.45); --sombra-alzada: 0 2px 0 rgba(22,36,28,.06), 0 26px 52px -26px rgba(22,36,28,.55); --curva: cubic-bezier(.22, .61, .36, 1); --curva-entrada: cubic-bezier(.16, .84, .44, 1); --lento: .72s; --medio: .38s; --rapido: .18s; --foco: var(--verde-hondo); --z-cabecera: 60; --z-control: 70; --z-saltar: 90; } /* ----------------------------------------------------------------------------- 7 · CONTEXTO OSCURO Una sección se marca [data-fondo="oscuro"] y todos los roles se recalculan. Ningún componente tiene que saber en qué fondo está. -------------------------------------------------------------------------------*/ [data-fondo="oscuro"] { /* Esto NO es decorativo, es imprescindible: `body { color: var(--tinta) }` se resuelve una sola vez, en body. Redefinir --tinta más abajo cambia la variable pero no vuelve a pintar lo que ya heredó el color calculado. Sin esta línea, un titular de sección sin `color` propio se queda en verde oscuro sobre fondo verde oscuro. Pasó, y solo se vio mirando la página. */ color: var(--tinta); --fondo: var(--sombra-monte); --fondo-alto: var(--monte-alto); --fondo-hondo: var(--monte-hondo); --tinta: var(--cal-viva); /* 13,91:1 */ --tinta-media: var(--hueso); /* 9,53:1 */ --tinta-tenue: var(--ceniza); /* 6,02:1 */ --acento: var(--verde-alto); /* 5,27:1 */ --acento-activo: var(--verde-mas-alto); /* 7,24:1 */ --rotulo: var(--neblina); /* 7,27:1 */ --linea: var(--oro-injerto); --linea-texto: var(--luz-filo); /* 7,82:1 — sobre oscuro el oro SÍ es texto, y es el único sitio donde se le permite serlo */ --filete: var(--filete-oscuro); --filete-control: var(--filete-fuerte); --velo: rgba(237, 239, 233, .07); --foco: var(--luz-filo); } /* ----------------------------------------------------------------------------- 8 · MODO LIGERO No es un modo degradado ni un castigo: es el sitio sin lo que cuesta batería y datos. Se persiste en localStorage y se aplica antes del primer pintado. -------------------------------------------------------------------------------*/ [data-modo="ligero"] { --lento: .001s; --medio: .001s; --rapido: .001s; }