diff --git a/components/primitives/HiloConductor.tsx b/components/primitives/HiloConductor.tsx index 99b3574..5d6df1b 100644 --- a/components/primitives/HiloConductor.tsx +++ b/components/primitives/HiloConductor.tsx @@ -3,7 +3,7 @@ import { useState } from 'react'; import { motion, useMotionValueEvent, useScroll, useSpring, useTransform } from 'framer-motion'; import { usePrefersReducedMotion } from '@/lib/motion'; -import { BARRAS_SIMBOLO, VIEWBOX_SIMBOLO } from '@/lib/simbolo'; +import { BARRAS_SIMBOLO, RADIO_BARRA, VIEWBOX_SIMBOLO } from '@/lib/simbolo'; // The gold spine of the page: one continuous line down the vertical centre, // drawing itself as the reader scrolls and resolving into the ≡ at the close. @@ -23,8 +23,12 @@ const ALTO = 1200; const PASO = ALTO / TRAMOS; // A band, not a thread. Held in real pixels by vector-effect below, so it never -// again collapses to a hairline when the viewBox scale changes. -const GROSOR = 14; +// again collapses to a hairline when the viewBox scale changes. The attribute +// is the desktop weight and the SSR fallback; GROSORES overrides it in CSS, +// because 14px is 3.6% of a 390px screen and cut straight through the body +// copy there. CSS stroke-width wins over the presentation attribute. +const GROSOR = 12; +const GROSORES = '[stroke-width:7px] md:[stroke-width:12px]'; // Four long swells rather than one page-long curve or ten short ones. Stretched // over the whole document with preserveAspectRatio="none", a single swell reads @@ -48,7 +52,13 @@ export function HiloConductor({ className = '' }: { className?: string }) { const reduced = usePrefersReducedMotion(); const { scrollYProgress } = useScroll(); const recorrido = useTransform(scrollYProgress, [0, FIN], [0, 1], { clamp: true }); - const avance = useSpring(recorrido, { stiffness: 90, damping: 30, restDelta: 0.001 }); + // Stiff enough to keep up with the reader. At 90/30 the spring is heavily + // overdamped and takes some two seconds to settle, so the leading edge + // visibly trailed behind the scroll and read as an amputated stub. + const avance = useSpring(recorrido, { stiffness: 210, damping: 40, restDelta: 0.001 }); + // At rest the round cap still paints its own dot at the path's origin, which + // landed as a stray blob dead centre at the top of the page on first load. + const aparicion = useTransform(avance, [0, 0.015], [0, 1]); const [dibujado, setDibujado] = useState(false); useMotionValueEvent(avance, 'change', (v) => { @@ -65,6 +75,7 @@ export function HiloConductor({ className = '' }: { className?: string }) { const trazo = reduced ? ( ); @@ -93,7 +105,7 @@ export function HiloConductor({ className = '' }: { className?: string }) { auto` resolves from the width (1152 → 13824px) and silently wins over `bottom`, adding ~6000px of blank scroll below the footer. */}
- - +
@@ -32,7 +35,9 @@ export function Estratega() { {estratega.title} -

años construyendo marcas

+ {/* 8rem was narrower than the word "construyendo" itself, which + broke the label into three ragged lines beside the number. */} +

años construyendo marcas

{estratega.bio} diff --git a/components/sections/FraseAncla.tsx b/components/sections/FraseAncla.tsx index c2e7529..10da7bb 100644 --- a/components/sections/FraseAncla.tsx +++ b/components/sections/FraseAncla.tsx @@ -11,7 +11,7 @@ export function FraseAncla() { const reduced = usePrefersReducedMotion(); return (
- + {/* Payoff for the tension the hero leaves open: here the lines do diff --git a/components/sections/Hero.tsx b/components/sections/Hero.tsx index 98b904b..0668906 100644 --- a/components/sections/Hero.tsx +++ b/components/sections/Hero.tsx @@ -23,10 +23,13 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) { return (
- + {/* Kept clear of the wordmark on narrow screens: at 390px the md field + reached back across the logotype and the tagline, so the pattern read + as collision rather than texture. */} + - -
+ +
@@ -44,16 +47,21 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) { ]} /> - - - + {/* Full width while stacked: at their natural widths the two CTAs + came out ragged and unequal, which read as an accident rather + than as hierarchy. */} + + + {/* Complexity → focus, left unresolved: the hero poses the tension - and FraseAncla pays it off by resolving into the ≡. */} + and FraseAncla pays it off by resolving into the ≡. Shown on every + breakpoint — hidden below lg it left the phone hero with no piece + of the brand's own graphic language at all. */} - + className="min-w-0"> +
diff --git a/components/sections/Mecanismo.tsx b/components/sections/Mecanismo.tsx index 67df15c..62a909f 100644 --- a/components/sections/Mecanismo.tsx +++ b/components/sections/Mecanismo.tsx @@ -24,7 +24,7 @@ export function Mecanismo() { > - + {mecanismo.eyebrow} - + {paraQuien.title} -