/* ==================================================================== ALFAMU PLAY — Design Tokens Fuente única de verdad del sistema visual. Ninguna página debe declarar color, tipografía, espaciado o radio fuera de estos tokens. Prefijo: --am- ==================================================================== */ /* ==================================================================== TIPOGRAFÍAS · DECLARACIÓN Dos familias de marca —las mismas que compone alfamuplay.com— y una capa lúdica reservada a producto. Todos los ficheros viven en assets/fonts/ en WOFF2: es el único formato que soportan todos los navegadores vigentes y pesa ~30 % menos que WOFF. ==================================================================== */ /* --- 1 · MONSTRAL · display y logotipo ------------------------------ Es la letra del wordmark y de los titulares de la casa. La imagen de referencia la usa en caja alta y baja: «Nadie nace creyendo que no puede.» — NO en versal. La versal es una decisión antigua del brandbook que la web nunca aplicó. 400 Y SÓLO 400. El fichero es estático: no tiene tabla fvar y su usWeightClass es 400. Prometer un rango que no existe autoriza al navegador a SINTETIZAR negrita — engordar el trazo sobre el mismo avance—, que es tinta falsa. Por eso toda clase de display fija font-weight:400 expresamente. Medido: 232 glifos, 235 caracteres, castellano completo (áéíóúü ÁÉÍÓÚÜ ñÑ ¿¡ «» — … €). El nombre canónico es «Monstral»; «DxMonstral» se mantiene como alias porque los capítulos 01–10 y el CSS antiguo lo invocan así. */ @font-face{ font-family:"Monstral"; src:url("fonts/dxmonstral-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"DxMonstral"; /* alias de compatibilidad */ src:url("fonts/dxmonstral-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } /* --- 2 · HELVENA · texto ------------------------------------------- Variable de 200 a 900 en un solo fichero de 40 KB. 611 glifos, 553 caracteres, castellano completo. `format("woff2") tech(variations)` ES LA SINTAXIS VIGENTE. La cadena `woff2-variations` fue un borrador de CSS Fonts 4 que la especificación retiró: un navegador actual no la reconoce, DESCARTA esa entrada de `src` y sólo sigue pintando porque más abajo hay otra. Se declara primero la forma correcta y después las dos antiguas como red. OJO — LA INSTANCIA POR DEFECTO DE HELVENA ES 200 (Extralight), no 400. Cualquier elemento que no declare font-weight se pinta en Extralight. Por eso `body` fija el peso y ninguna regla de texto lo omite. */ @font-face{ font-family:"Helvena"; src:url("fonts/helvena-variable.woff2") format("woff2") tech(variations), url("fonts/helvena-variable.woff2") format("woff2-variations"), url("fonts/helvena-variable.woff2") format("woff2"); font-weight:200 900; font-style:normal; font-display:swap; } /* --- 3 · CAPA LÚDICA · producto, nunca marca ------------------------ Cuatro display infantiles incorporadas en agosto de 2026. NO son tipografías de marca: no componen el logotipo, ni la web corporativa, ni un documento institucional. Viven dentro de los mundos y los juegos. El capítulo 05 fija dónde entra cada una y qué le falta. COBERTURA REAL DE CASTELLANO, medida glifo a glifo el 18-08-2026: Kids Cute · 323 car. · COMPLETA — única apta para texto libre RANDOMS · 244 car. · faltan ¿ ¡ · KidsMarker· 167 car. · faltan ¿ ¡ « » — – … € Boldchild · 145 car. · faltan ¿ ¡ « » — – … € % Sin ¿ ni ¡ no se puede escribir una pregunta ni una exclamación en castellano: el navegador sustituye por la fuente de respaldo y el rótulo cambia de letra a mitad de palabra. Es un límite duro. */ @font-face{ font-family:"Kids Cute"; src:url("fonts/kidscute-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Kids Cute Shadow"; src:url("fonts/kidscute-shadow.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"RANDOMS"; src:url("fonts/randoms-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"KidsMarker"; src:url("fonts/kidsmarker-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Boldchild"; src:url("fonts/boldchild-bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } :root{ /* ================================================================== 1 · COLOR ================================================================== */ /* --- 1.1 Superficie base — el blanco es el material dominante ----- */ --am-blanco: #FFFFFF; /* superficie primaria de todo el sistema */ --am-n-50: #F7F9F8; /* superficie alterna, franjas de sección */ --am-n-100: #EFF3F2; /* superficie hundida, celdas, code */ --am-n-200: #E1E8E6; /* divisores estructurales */ --am-n-300: #C9D4D1; /* bordes decorativos (no UI) */ --am-n-500: #7A8D89; /* bordes de control · 3.50:1 sobre blanco */ --am-n-600: #586A66; /* texto terciario · 5.72:1 */ --am-n-700: #3A4B47; /* texto secundario · 9.22:1 */ /* --- 1.2 Primario — Rich Black ------------------------------------ Es la tinta de la marca y su superficie oscura. Todo texto de lectura, todo titular y toda navegación primaria usan este color. */ --am-tinta: #004638; /* Rich Black · 10.86:1 sobre blanco */ --am-tinta-900: #003026; /* superficie más profunda: barra y pie */ --am-tinta-700: #005C49; /* estado hover sobre superficie oscura */ --am-tinta-08: rgba(0,70,56,.08); /* velo sutil */ --am-tinta-16: rgba(0,70,56,.16); /* velo de separación */ /* --- 1.3 Acento de acción — Portland Orange ------------------------ Color de interacción: llamadas a la acción, foco, estado activo, subrayados de énfasis. NUNCA como color de texto sobre blanco. */ --am-naranja: #FC5A31; /* Portland Orange · acento gráfico puro */ --am-naranja-650: #CE411D; /* botón sólido con texto blanco · 4.77:1 AA */ --am-naranja-700: #C23A16; /* versión texto-segura · 5.37:1 */ --am-naranja-800: #A32F10; /* botón AAA y color de estado error · 7.07:1 */ --am-naranja-50: #FFEDE8; /* tinte de fondo */ /* --- 1.4 Acentos de categoría — un color por pilar ----------------- Superficies de énfasis y codificación de sección. Siempre con texto Rich Black encima; nunca con texto blanco. */ --am-azul: #C7DDDC; /* Columbia Blue · DISCOVER */ --am-violeta: #D199F9; /* Pale Violet · LEARN */ --am-menta: #B7FCBF; /* Magic Mint · GROW */ --am-lima: #DCED59; /* Maximum Green Yellow · CREATE */ /* PLAY usa --am-naranja */ /* --- 1.5 Versiones profundas — para texto e iconos sobre blanco ---- */ --am-azul-800: #2A5C5A; /* 7.56:1 */ --am-violeta-800: #6B2F96; /* 8.49:1 */ --am-menta-800: #106B28; /* 6.65:1 */ --am-lima-800: #5A6600; /* 6.30:1 */ /* --- 1.6 Tintes de superficie — para franjas y bloques suaves ------ */ --am-azul-50: #EDF5F4; --am-violeta-50: #F6EDFE; --am-menta-50: #EAFCEE; --am-lima-50: #FAFDDF; /* --- 1.7 Estados — derivados de la propia paleta -------------------- */ --am-exito: #106B28; --am-exito-bg: #EAFCEE; /* familia Menta */ --am-alerta: #5A6600; --am-alerta-bg: #FAFDDF; /* familia Lima */ --am-error: #A32F10; --am-error-bg: #FFEDE8; /* familia Naranja*/ --am-info: #2A5C5A; --am-info-bg: #EDF5F4; /* familia Azul */ /* --- 1.8 Alias semánticos ------------------------------------------ */ --am-superficie: var(--am-blanco); --am-superficie-alt: var(--am-n-50); --am-texto: var(--am-tinta); --am-texto-2: var(--am-n-700); --am-texto-3: var(--am-n-600); --am-borde: var(--am-n-200); --am-borde-control: var(--am-n-500); --am-acento: var(--am-naranja); --am-acento-texto: var(--am-naranja-700); /* ================================================================== 1.9 · PAREJAS CROMÁTICAS OFICIALES Los seis colores no son independientes: se relacionan en tres parejas. Cada pareja define superficie + contraforma. El texto NO se deduce de la pareja: se toma siempre del par validado que corresponda a la superficie (ver 1.10). ------------------------------------------------------------------ Pareja 01 · INSTITUCIONAL — Columbia Blue ↔ Rich Black · 7.66:1 Única pareja legible en ambos sentidos. Lectura larga, superficies de sistema, navegación, documentación. Pareja 02 · IMAGINACIÓN — Pale Violet ↔ Magic Mint · 1.84:1 Pareja gráfica. Contraforma, ilustración, mundos, categorías. Nunca uno como texto sobre el otro. Pareja 03 · ENERGÍA — Maximum Green Yellow ↔ Portland Orange · 2.45:1 Pareja gráfica de máxima activación. Acción, resaltado, campaña. Nunca uno como texto sobre el otro. ================================================================== */ --am-par1-a: var(--am-azul); --am-par1-b: var(--am-tinta); --am-par2-a: var(--am-violeta); --am-par2-b: var(--am-menta); --am-par3-a: var(--am-lima); --am-par3-b: var(--am-naranja); /* ================================================================== 1.10 · TEXTO VALIDADO POR SUPERFICIE Regla única: sobre superficie clara, Rich Black; sobre superficie Rich Black, blanco. Portland Orange es el caso especial — ver 1.11. ================================================================== */ --am-sobre-azul: var(--am-tinta); /* 7.66:1 AAA */ --am-sobre-violeta: var(--am-tinta); /* 4.98:1 AA */ --am-sobre-menta: var(--am-tinta); /* 9.15:1 AAA */ --am-sobre-lima: var(--am-tinta); /* 8.43:1 AAA */ --am-sobre-tinta: var(--am-blanco); /* 10.86:1 AAA */ /* --- 1.11 Portland Orange: escalera de legibilidad ------------------- #FC5A31 puro no alcanza 4.5:1 con ningún color de la paleta. Se usa por tamaño: display (≥24px, o ≥18.66px bold) → blanco sobre #FC5A31 · 3.16:1 texto pequeño, botón, señalética → blanco sobre #C23A16 · 5.37:1 El texto sobre naranja es SIEMPRE blanco. Nunca Rich Black en tamaño pequeño: 3.44:1 no basta y además compite cromáticamente. */ --am-sobre-naranja-display: var(--am-blanco); --am-naranja-senal: var(--am-naranja-700); --am-sobre-naranja-senal: var(--am-blanco); /* --- 1.11b Excepción del logotipo ------------------------------------ WCAG 2.2 SC 1.4.3 y 1.4.11 exceptúan expresamente logotipos y nombres de marca de los umbrales de contraste. El wordmark, el marcador del sello y las firmas de endoso usan SIEMPRE el naranja puro de marca — nunca un peldaño oscurecido. La escalera de legibilidad de 1.11 gobierna el texto, no la identidad. */ --am-logo-acento: var(--am-naranja); /* ================================================================== 1.12 · ESTADOS INTERACTIVOS — valores por defecto Contexto: superficie blanca o neutra. Cada contexto de superficie los remapea en brandbook.css usando su pareja cromática, de modo que un hover nunca se funde con el fondo sobre el que aparece. ================================================================== */ /* Acción primaria */ --am-i1-bg: var(--am-naranja-650); --am-i1-fg: var(--am-blanco); --am-i1-bd: var(--am-naranja-650); --am-i1-hover-bg: var(--am-tinta); --am-i1-hover-fg: var(--am-blanco); --am-i1-hover-bd: var(--am-tinta); --am-i1-active-bg: var(--am-naranja-800); --am-i1-active-fg: var(--am-blanco); /* Acción secundaria */ --am-i2-bg: transparent; --am-i2-fg: var(--am-tinta); --am-i2-bd: var(--am-tinta); --am-i2-hover-bg: var(--am-tinta); --am-i2-hover-fg: var(--am-blanco); --am-i2-hover-bd: var(--am-tinta); --am-i2-active-bg: var(--am-tinta-900); --am-i2-active-fg: var(--am-blanco); /* Deshabilitado — mismo en todo contexto, con doble señal */ --am-i-off-bg: var(--am-n-100); --am-i-off-fg: var(--am-n-600); --am-i-off-bd: var(--am-n-300); /* Foco */ --am-i-focus: var(--am-naranja); --am-i-focus-ring: rgba(0,48,38,.22); /* ================================================================== 1.13 · RESALTADO TIPOGRÁFICO Bloque sólido detrás del fragmento clave de un titular. Combinación maestra: Lima sobre Rich Black · 8.43:1 ================================================================== */ --am-mark-bg: var(--am-lima); --am-mark-fg: var(--am-tinta); --am-mark-px: .28em; /* padding horizontal, relativo a la caja */ --am-mark-py: .06em; /* padding vertical */ --am-mark-radius: var(--am-r-xs); /* ================================================================== 2 · TIPOGRAFÍA ================================================================== */ /* --- 2.1 Las tres voces --------------------------------------------- Es exactamente el reparto que compone alfamuplay.com. Nada más entra en una superficie de marca. MONSTRAL · logotipo y titular. Un solo peso, 235 caracteres, caja de contenido 1.008em. Compone el wordmark y los cinco pasos de display. EN CAJA ALTA Y BAJA, como en la web: «Nadie nace creyendo que no puede.» La versal completa queda para el wordmark y poco más. Nunca texto corrido, nunca por debajo de 20 px. HELVENA · todo el texto. Variable 200–900, caja de contenido 1.270em. Entradilla, cuerpo, secundario, nota, tabla, botón y cifra de dato. MONO · etiqueta. La pila del sistema. Es la tercera letra que se ve en la imagen —el rótulo «EMPRESA DE DESARROLLO DE JUEGOS Y PRODUCTOS DIGITALES» y los enlaces de la barra— y también el volcado de código. Un solo tamaño, siempre en versal y siempre con tracking abierto. */ --am-f-display: "Monstral","DxMonstral", system-ui, sans-serif; --am-f-texto: "Helvena", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --am-f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* --- 2.2 Capa lúdica · producto, nunca marca ------------------------- No sustituyen a Monstral: viven dentro de los mundos y los juegos. Cada una cae hacia una familia de marca si el glifo no existe — por eso el respaldo se declara aquí y no en la regla que las use. */ --am-f-juego: "Kids Cute", var(--am-f-display); /* la única apta para texto */ /* NO ES UNA TIPOGRAFÍA: ES UNA CAPA. Sus glifos son sólo la sombra, y comparten avance exacto con Kids Cute Regular (N 590/1000, e 534, l 240) porque están hechos para apilarse — el mismo texto dos veces, misma posición, Shadow debajo. Sola produce una mancha ilegible. Comprobado por render el 18-08-2026. */ --am-f-juego-sh: "Kids Cute Shadow","Kids Cute", var(--am-f-display); --am-f-rotulo: "RANDOMS", var(--am-f-display); --am-f-mano: "KidsMarker", var(--am-f-texto); --am-f-grito: "Boldchild", var(--am-f-display); /* --- 2.3 ESCALA CERRADA · doce tamaños, ni uno más -------------------- Cuatro reglas la cierran: · DISPLAY (Monstral), cinco pasos, cada uno ≥1.21× el siguiente en TODO el rango. Ninguna regla de Monstral puede omitir line-height. · RÓTULO (Monstral en interfaz), dos tamaños fijos: no los manda la jerarquía sino el objetivo táctil. · TEXTO (Helvena), cuatro tamaños, con saltos cortos a propósito: aquí manda el suelo de legibilidad. · ETIQUETA (mono), UNO. A 11 px la mono del sistema no admite matiz. Son los mismos doce valores que sirve la web. Si un tamaño no está aquí, no existe. */ --am-t-d0: clamp(2.7rem, 8.4vw, 6.2rem); /* 43.2 → 99.2 · h1 de portada, uno por página */ --am-t-d1: clamp(2.1rem, 5.6vw, 4.1rem); /* 33.6 → 65.6 · secciones que gritan */ --am-t-d2: clamp(1.7rem, 4.1vw, 3.05rem); /* 27.2 → 48.8 · secciones que hablan */ --am-t-d3: clamp(1.4rem, 3.3vw, 2.3rem); /* 22.4 → 36.8 · subsección · wordmark de pie */ --am-t-d4: clamp(1.15rem, 2.2vw, 1.55rem); /* 18.4 → 24.8 · título de tarjeta · nombre de producto */ --am-t-r1: 1.0625rem; /* 17 · logotipo de barra, botón primario */ --am-t-r0: .875rem; /* 14 · rótulo pequeño */ --am-t-lead: clamp(1.1rem, 2vw, 1.38rem); /* 17.6 → 22.1 · entradilla y cita */ --am-t-cuerpo:1.0625rem; /* 17 · cuerpo */ --am-t-sm: .9375rem; /* 15 · texto secundario */ --am-t-xs: .8125rem; /* 13 · nota al pie */ --am-t-lb: .6875rem; /* 11 · TODAS las etiquetas */ /* --- 2.4 Interlineado ------------------------------------------------- MONSTRAL Y HELVENA NO PUEDEN COMPARTIR INTERLÍNEA, y es métrica de los ficheros, no criterio: la caja de contenido de Monstral mide 1.008em y la de Helvena 1.270em. El 1.6 del cuerpo —calibrado para Helvena— le daba a Monstral un 74 % más de aire. Y al revés: bajar un titular de Helvena por debajo de 1.27 hace que las líneas se toquen. Por eso hay dos escalas y un token propio para el titular de Helvena. */ --am-lh-d0: .92; --am-lh-d1: .98; --am-lh-d2: 1.05; --am-lh-d3: 1.12; --am-lh-d4: 1.2; --am-lh-r: 1; --am-lh-h: 1.28; /* titular compuesto en Helvena · suelo métrico 1.27 */ --am-lh-lead:1.5; --am-lh-txt: 1.6; --am-lh-lb: 1.5; /* --- 2.5 Tracking ------------------------------------------------------ EL DISPLAY ABRE, NO CIERRA. El valor anterior era −0.015em para todos los pasos: tracking negativo sobre una geométrica de caja alta junta las bastones verticales y a 65 px «mn», «nn» y «un» se leen como una mancha. La web abre entre 0.004 y 0.02 em, más cuanto más pequeño es el paso, que es la dirección correcta. */ --am-tr-d0: .004em; --am-tr-d1: .007em; --am-tr-d2: .01em; --am-tr-d3: .014em; --am-tr-d4: .02em; --am-tr-r: .03em; --am-tr-lb: .14em; /* etiqueta en versal */ --am-tr-txt: 0; /* --- 2.6 CORRECCIÓN DE ESPACIO ENTRE PALABRAS -------------------------- ÉSTE ES EL FALLO TIPOGRÁFICO QUE SE VE Y NO SE SABE NOMBRAR. Medido en los ficheros el 18-08-2026: el glifo `space` de Helvena mide 200/1000 = 0.200 em. Una grotesca de texto se mueve entre 0.25 y 0.31 em —Helvetica 0.250, Arial 0.278—, así que Helvena separa las palabras un 25 % menos de lo normal. A tamaño de cuerpo se tolera; en botones, rótulos en versal y titulares el ojo deja de ver palabras y ve una mancha. No es un problema de carga —la fuente carga y el eje responde— sino de MÉTRICA, y por eso no se arregla cambiando de familia: se arregla devolviéndole al espacio los centésimos que le faltan. Helvena .200 em + .060 = .260 em (banda de Helvetica) Monstral .248 em + .022 = .270 em (508/2048; la versal pide más aire) Va en `em` para que escale con la tipografía fluida y no haya que tocarlo por breakpoint. */ --am-ws-texto: .06em; --am-ws-display: .022em; /* --- 2.7 Pesos Helvena ------------------------------------------------- AVISO: la instancia por defecto del fichero variable es 200, no 400. Todo elemento de texto declara su peso; ninguno lo hereda a ciegas. */ --am-w-light: 300; --am-w-book: 400; --am-w-medium: 500; --am-w-semi: 600; --am-w-bold: 700; --am-w-black: 800; /* --- 2.8 Alias de compatibilidad --------------------------------------- Los capítulos 01–10 se escribieron contra los nombres antiguos. Se mantienen apuntando al escalón equivalente de la escala cerrada para no reescribir diez documentos: cambia el valor, no la llamada. NO USAR EN CÓDIGO NUEVO. */ --am-t-h4: var(--am-t-d4); --am-t-body: var(--am-t-cuerpo); --am-t-sec: var(--am-t-sm); --am-t-note: var(--am-t-xs); --am-t-label: var(--am-t-lb); --am-t-nav: var(--am-t-lb); --am-lh-d: var(--am-lh-d1); --am-lh-body: var(--am-lh-txt); --am-lh-sec: var(--am-lh-txt); --am-tr-d: var(--am-tr-d1); --am-tr-body: var(--am-tr-txt); --am-tr-label:var(--am-tr-lb); --am-tr-nav: var(--am-tr-lb); /* ================================================================== 3 · RETÍCULA Y ESPACIADO ================================================================== */ --am-max: 1200px; /* contenedor de contenido */ /* MEDIDA DE LECTURA · 64ch, y el número está medido, no elegido. `ch` no mide un carácter: mide el avance del glifo «0», que en Helvena son 555/1000 em. El carácter medio real de un texto en castellano —letras ponderadas por frecuencia, más la parte proporcional del espacio, que es estrecho— mide 542/1000 em. Es decir, cada ch equivale a 1.023 caracteres reales: 68ch → 70 caracteres · roza el techo de la banda legible 64ch → 66 caracteres · el centro exacto de la banda 45–75 Medido en el fichero el 18-08-2026. */ --am-max-txt: 64ch; --am-cols: 12; --am-gutter: 24px; --am-margin: clamp(20px, 4vw, 56px); --am-s-1: 4px; --am-s-2: 8px; --am-s-3: 12px; --am-s-4: 16px; --am-s-5: 24px; --am-s-6: 32px; --am-s-7: 48px; --am-s-8: 72px; --am-s-9: 104px; /* ================================================================== 4 · GEOMETRÍA Sistema estructurado. No existe radio de cápsula: ningún control, chip, pestaña o señalética termina en semicírculo. ================================================================== */ --am-r-0: 0; /* reglas, franjas, marcadores */ --am-r-xs: 2px; /* chips, tags, labels, celdas */ --am-r-sm: 4px; /* botones, inputs, controles, pestañas */ --am-r-md: 8px; /* cards, boxes, bloques de contenido */ --am-r-lg: 12px; /* contenedores mayores, muestras, escenarios */ /* Radio máximo permitido en el sistema: 12px. */ --am-borde-1: 1px; --am-borde-2: 2px; --am-borde-3: 3px; /* barra de acento de sección activa */ /* ================================================================== 5 · ELEVACIÓN Discreta: el sistema se estructura con borde y color, no con sombra. ================================================================== */ --am-sh-sm: 0 1px 2px rgba(0,48,38,.06); --am-sh-md: 0 2px 4px rgba(0,48,38,.06), 0 8px 20px rgba(0,48,38,.06); --am-sh-lg: 0 4px 8px rgba(0,48,38,.07), 0 20px 44px rgba(0,48,38,.10); /* ================================================================== 6 · FOCO Doble señal: contorno de acento + halo oscuro. Nunca solo color. ================================================================== */ --am-focus-w: 3px; --am-focus-color: var(--am-naranja); --am-focus-ring: 0 0 0 5px rgba(0,48,38,.22); /* ================================================================== 7 · MOVIMIENTO ================================================================== */ --am-dur-fast: 120ms; --am-dur-base: 200ms; --am-dur-slow: 380ms; --am-ease: cubic-bezier(.2,.6,.2,1); /* ================================================================== 8 · BREAKPOINTS (referencia para @media) sm 560 · md 820 · lg 1080 · xl 1360 ================================================================== */ } @media (prefers-reduced-motion: reduce){ :root{ --am-dur-fast:1ms; --am-dur-base:1ms; --am-dur-slow:1ms; } }