/* ═══════════════════════════════════════════════════════════════════════ AMINO MODE — «Aluminio anodizado bajo luz lineal» Mundo visual v11 · 1 de octubre de 2026 · reemplaza al derivado del Brand Book v1.0 LA TESIS Esta superficie es una PIEZA MECANIZADA. No un laboratorio y no un gimnasio. Rechaza a propósito el arreglo por defecto de la categoría —fondo casi negro, acentos de neón que brillan, foto de cuerpo como héroe— por dos razones que apuntan al mismo sitio: es exactamente lo que produce cualquier generador al que se le pida «péptidos de alto rendimiento», y una foto de cuerpo insinúa justo la promesa que la regla editorial número uno prohíbe hacer. La energía deportiva la lleva la LUZ CRUZANDO METAL, no un cuerpo corriendo. Eso resuelve las dos cosas a la vez: da la tensión que pedía el encargo y no promete nada sobre nadie. EL MATERIAL · Fondo de aluminio anodizado, con grano y deriva tonal. Nunca plano. · Luz lineal rasante, de canto duro. Sin halo, sin resplandor, sin brillo difuso: una franja estrecha que cruza y se corta. · Los seis frentes son COLORES DE ANODIZADO sobre superficie real —bloques, cantos, campos—, jamás un filete de 1 px que brilla. · Esquinas rectas. El detalle de la pieza es la MARCA DE MECANIZADO: una escuadra de 2 px en el canto superior izquierdo, como la que deja una fresa. · Archivo variable en ANCHO para el titular; el titular se ensancha o se estrecha para llenar su medida en vez de encoger. · Public Sans para leer. Martian Mono SOLO para lo que es medida de verdad: miligramos, lote, SKU, grados. En ningún otro sitio. LO QUE NO SE TOCA El contenido, palabra por palabra. Los seis colores de frente, que están impresos en las etiquetas de los viales. El emblema y el logotipo, que se incrustan desde el archivo maestro y nunca se dibujan. El archivo anterior queda en `estilo-v10-referencia.css`. ═══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────── 1 · MATERIA ───────────────────────── */ :root{ /* El aluminio. Cinco niveles, todos con un punto de verde-neutro: el anodizado oscuro nunca es gris puro, y un gris puro es lo que delata un fondo elegido en un selector de color en vez de mirado. */ /* v16. Las seis superficies bajan entre 9 y 13 puntos de luminancia. Motivo, medido y no opinado: el suelo estaba en #1B1D20 — gris de media luz. La categoría a la que esta marca aspira trabaja sobre casi negro: Oura usa #000 de lienzo con tarjetas en #0d0d0d y #1a1a1a; WHOOP, #000 con #0a0a0a y #141414; Porsche, un lienzo de luminancia 1,2 %. Sobre un suelo de media luz ningún acento puede ser escaso: para destacar necesita saturación y superficie, y ahí es donde una página empieza a verse ordinaria. Bajar el suelo SUBE el contraste de toda la tinta y de los seis colores de frente, que estaban medidos contra --alu-3 y --alu-2: la escalera de abajo no pierde un solo umbral, los mejora todos. */ --alu-0:#0B0D0E; /* el pozo: fotografía, puerta de entrada */ --alu-1:#101214; /* el suelo de la página */ --alu-2:#16191C; /* panel */ --alu-3:#1E2125; /* panel levantado, estado de reposo de un control */ --mill:#2E3338; /* el canto mecanizado: el filete de 1 px */ --mill-soft:#1F2327; /* La tinta. Medida contra --alu-2, que es la superficie más clara donde cae texto; lo que pasa ahí pasa en todas las demás. */ --ink:#F3F4F5; /* 15,1 : titular y dato */ --ink-2:#C9CDD2; /* 10,0 : el párrafo */ --ink-3:#9BA1A8; /* 5,9 : subordinado, rótulo, pie */ /* Los seis frentes. `--m` es el color de marca —el del anodizado, el de la etiqueta del vial— y se usa en superficie: rellenos y filetes de 3 px o más. `--m-txt` es el mismo color corregido para leerse COMO TEXTO sobre oscuro. La regla no es estética: el violeta de NEURO en texto da 2,7 de contraste y es ilegible. Medidos contra --alu-3, que es la superficie más clara donde cae texto —el reposo de una tarjeta levantada—, los seis pasan de 5,0. Tres estaban clavados en 4,50, 4,56 y 4,59: el mínimo exacto, sin un punto de margen. Un umbral sin margen no es un umbral; cualquier retoque del gris de fondo lo rompía sin que nadie se diera cuenta. Se subió sólo la luminosidad y se dejaron el tono y la saturación, que es lo que mantiene el color reconocible como el del frente. */ --sk:#FF5E14; --sk-txt:#FF8B52; --rp:#00E5F5; --rp-txt:#00E5F5; --pf:#0A6BFF; --pf-txt:#5D9EFF; --nr:#6A00FF; --nr-txt:#B885FF; --vt:#2BE08A; --vt-txt:#2BE08A; --dr:#FF2D78; --dr-txt:#FF6D9E; --m:var(--rp); --m-txt:var(--rp-txt); /* respaldo; cada bloque declara la suya */ --ok:#3DDC8C; --warn:#FFC53D; --stop:#FF6F7F; --wa:#25D366; /* Las tres caras. Variables las tres: el eje de ancho de Archivo es el que hace el trabajo de composición, no un adorno. */ --display:"Archivo","Archivo Narrow",Helvetica,Arial,sans-serif; --text:"Public Sans",-apple-system,"Segoe UI",Helvetica,sans-serif; --dato:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace; --wrap:1200px; --gut:clamp(20px,3.4vw,40px); --esc:clamp(56px,7.2vw,116px); /* el aire entre secciones */ /* ── Las curvas y los tiempos ──────────────────────────────────────── La curva salía escrita a mano ocho veces en la hoja. Ahora es un token: si algún día el movimiento del sitio cambia de carácter, cambia aquí y cambia entero. `--ease-out` arranca rápido y frena al final. Es la correcta para todo lo que entra, sale o se mueve: el usuario mira justo el primer instante, y una curva que empieza lenta hace que una animación de 200 ms se sienta más lenta que otra de 200 ms bien curvada. Los tiempos salen del presupuesto por elemento: nada de interfaz pasa de 300 ms. Por encima de ahí deja de leerse como respuesta y empieza a leerse como espera. */ --ease-out:cubic-bezier(.16,1,.3,1); --t-toque:.16s; /* la respuesta al dedo o al clic */ --t-estado:.2s; /* color, borde, fondo */ --t-mover:.24s; /* lo que se desplaza o escala */ } /* El grano del anodizado. Una capa de ruido fija, al 3,5 %: sin ella el fondo es una tinta plana y la página deja de ser una superficie para ser un color. Va en el y no en el para que no se mueva con el desplazamiento ni genere una capa de composición por sección. */ /* El suelo va en como color MACIZO, y el material en . Nada de `background-attachment:fixed`: un fondo fijo se dimensiona contra la ventana, de modo que todo lo que queda por debajo del pliegue se pinta sobre el lienzo en blanco del navegador. Se vio en la primera captura de página completa —media portada en blanco con el texto gris encima— y es el mismo defecto que en iOS deja bandas al desplazar. */ html{ scroll-behavior:smooth;background:var(--alu-1); /* Las cinco de la rúbrica de interfaz de Vercel que faltaban, y las cinco se notan en un teléfono: · color-scheme pinta los controles y las barras nativas en oscuro; sin ella un