feat(hilo): el conductor baja visible por el centro, tras el texto

components/primitives/__tests__/Container.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Container } from '../Container';
+
+describe('<Container />', () => {
+  it('lifts its content above the conductor thread', () => {
+    const { container } = render(<Container>contenido</Container>);
+    const cls = container.firstElementChild?.className ?? '';
+    // The thread sits at z-10; the section backgrounds are z-auto. Lifting the
+    // content column to z-20 is what puts the text *above* a centred thread,
+    // so the spine reads behind the reading instead of across it.
+    expect(cls).toContain('relative');
+    expect(cls).toMatch(/\bz-20\b/);
+  });
+});

components/primitives/__tests__/HiloConductor.test.tsx

@@ -33,15 +33,15 @@ describe('<HiloConductor />', () => {
     expect(container.firstElementChild?.className).toContain('pointer-events-none');
   });
 
-  it('sits in the margin band beside the column, never over it', () => {
+  it('runs down the centre of the column, not in a side gutter', () => {
     const { container } = render(<HiloConductor />);
-    const svg = container.querySelector('svg');
-    // `right-full` (`right: 100%`) anchors the thread's right edge to the
-    // left edge of the `max-w-content` column it shares a parent with —
-    // structurally outside the column, not merely visually offset within it.
-    // Read via getAttribute: on an SVGElement, `.className` is an
-    // SVGAnimatedString, not a plain string.
-    expect(svg?.getAttribute('class')).toContain('right-full');
+    const cls = container.querySelector('svg')?.getAttribute('class') ?? '';
+    // `left-1/2 -translate-x-1/2` anchors the thread to the column's centre;
+    // the old `right-full` banished it to the left gutter, which is why the
+    // thread read as off to the side instead of as the page's spine.
+    expect(cls).toContain('left-1/2');
+    expect(cls).toContain('-translate-x-1/2');
+    expect(cls).not.toContain('right-full');
   });
 
   it('declares a stacking level that beats section roots but stays under the header', () => {
@@ -55,13 +55,14 @@ describe('<HiloConductor />', () => {
     expect(wrapperClass).not.toContain('z-50');
   });
 
-  it('is hidden below the breakpoint that guarantees a safe margin', () => {
+  it('renders on every breakpoint, not only on very wide screens', () => {
     const { container } = render(<HiloConductor />);
     const wrapperClass = container.firstElementChild?.className ?? '';
-    // No safe band exists under the content column's own breakpoint; hiding
-    // it there is what keeps it from ever creeping over the text.
-    expect(wrapperClass).toContain('hidden');
-    expect(wrapperClass).toContain('2xl:block');
+    // The thread is the brand's through-line; it belongs in the middle on a
+    // phone too. Legibility is handled by layering it behind the text, not by
+    // hiding it below a breakpoint.
+    expect(wrapperClass).not.toContain('hidden');
+    expect(wrapperClass).not.toContain('2xl:block');
   });
 
   it('renders a genuine plain path under reduced motion, not a neutralised motion.path', () => {