{/* Horizon label */}

Agente operando · ejemplo en WhatsApp ↓ Live

{/* Clipped chat — only the top is visible. */}

{/* The actual HeroChat — only its top is shown. We disable scrolling inside the panel by overlaying a transparent click-shield. */}

{/* Strong bottom fade so the cut-off feels intentional */} ); } /* ───────────────────────────────────────────────────────────── GalaxiaVideo — brand-video clip in continuous loop. Landscape rectangle (default 16:9). Soft feathered edges via nested mask-images: the outer wrapper fades left/right, the inner wrapper fades top/bottom. Stacking the two single-axis masks gives a fully-feathered rectangle WITHOUT relying on the uneven cross-browser support of `mask-composite`. A small zoom + offset on the inner video keeps any corner watermark inside the feather zone where it dissolves into the bg. ────────────────────────────────────────────────────────────── */ function GalaxiaVideo({ width = 460, height = 258, // Zoom in + offset to push any bottom-right watermark off-frame. zoom = 1.22, cropX = -0.060, cropY = -0.055, }) { // ── The "no-rectangle" trick ─────────────────────────────────── // 1. `mix-blend-mode: screen` already makes the video's black bg // add 0 against the dark page — the rectangle of pixels is // invisible there. // 2. The only thing that betrays a hard edge is the LIT region // near the crop. So instead of a linear top/bottom/left/right // feather we use a single RADIAL ellipse mask: the visible // content sits in the middle, and the edges dissolve outward // in every direction at once — no straight line anywhere. // 3. The radial fade is generous (full-opaque only in the center // third, then a long ramp out to fully transparent past the // rectangle edges) so even bright pixels near the side simply // melt into the page. /* V3 polish ADDENDUM (2026-05-18) — máscara mucho más agresiva para que el video se funda con el background espacial sin dejar borde rectangular. Cambios vs original: zona 100% opaca achicada (era 0-14%, ahora 0-6%), elipse más pequeña (era 60×66, ahora 46×50), ramp más largo y suave. El borde casi desaparece — solo queda la silueta del mascot lit. */ const radialMask = 'radial-gradient(ellipse 46% 50% at 50% 50%,' + ' #000 0%,' + ' #000 6%,' + ' rgba(0,0,0,0.90) 16%,' + ' rgba(0,0,0,0.76) 26%,' + ' rgba(0,0,0,0.58) 38%,' + ' rgba(0,0,0,0.40) 50%,' + ' rgba(0,0,0,0.24) 62%,' + ' rgba(0,0,0,0.12) 74%,' + ' rgba(0,0,0,0.05) 84%,' + ' rgba(0,0,0,0.02) 92%,' + ' transparent 100%)'; return (

{/* Page-bg vignette layered ON TOP of the masked video. A radial of the exact page bg color (#0A0A0F) sits transparent in the center and ramps to fully opaque at the edges — physically painting over any residual lit pixels with the SAME color as the surrounding page. Because the overlay color matches the page bg exactly, the overlay's own rectangle is invisible: the video can only ever bleed through where the overlay is transparent. */} {/* V3 polish ADDENDUM: overlay con bg de la página mucho más agresivo — empieza a opacar antes (era 26% transparente, ahora 14%), ramp más pronunciado en los bordes para borrar cualquier pixel lit residual. Combinado con la máscara más agresiva arriba, el video queda como "aparición" flotante en el espacio, sin rectángulo perceptible. */} ); } /* GalaxiaMascot — kept as a fallback; not currently rendered. Two eye modes: • 'covered' — face screen blanked; we redraw friendly cyan happy-eyes + smile that mimic the original • 'dots' — original mascot untouched; just two dark pupils inside the existing happy-eye arcs Animations (all CSS-only or rAF): • float — gentle vertical bob (5.2s) • body tilt — subtle 3D yaw/pitch toward mouse (3°/2° caps) • eye tracking — pupils lerp toward mouse direction • idle scan — slow circular eye scan when mouse goes quiet • blinks — randomly every 2.5–6s, sometimes double • antenna ball — pulse + bob on top of the antenna • smile breath — sub-pixel scale on the smile, slowest layer • rocket flame — flicker + scale on cyan exhaust under the feet • hand wave — micro rotation on the waving left hand ────────────────────────────────────────────────────────────── */ function GalaxiaMascot({ size = 186, eyesStyle = 'covered' }) { const rootRef = useRefV2(null); const innerRef = useRefV2(null); // 3D tilt target const leftEyeRef = useRefV2(null); const rightEyeRef= useRefV2(null); const handRef = useRefV2(null); const [blinkKey, setBlinkKey] = useStateV2(0); const SHIFT_X = 72; const covered = eyesStyle === 'covered'; const eyes = covered ? { cxL: 336 + SHIFT_X, cxR: 456 + SHIFT_X, cy: 336, maxOffset: 13 } : { cxL: 336 + SHIFT_X, cxR: 456 + SHIFT_X, cy: 338, pupilR: 10, maxOffset: 9 }; // ── Blink scheduler ─────────────────────────────────────────── useEffectV2(() => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; let mounted = true; let timer; const blink = () => { if (!mounted) return; setBlinkKey(k => k + 1); // Occasionally fire a double-blink if (Math.random() < 0.18) { setTimeout(() => mounted && setBlinkKey(k => k + 1), 320); } const next = 2400 + Math.random() * 3600; timer = setTimeout(blink, next); }; timer = setTimeout(blink, 1500 + Math.random() * 1500); return () => { mounted = false; clearTimeout(timer); }; }, []); // ── Mouse tracking: pupils + body tilt + hand wave bias ─────── useEffectV2(() => { let mx = null, my = null, lastMove = 0, raf = 0; const cur = { x: 0, y: 0 }; const tilt = { x: 0, y: 0 }; const onMove = (e) => { const el = rootRef.current; if (!el) return; const r = el.getBoundingClientRect(); const cx = r.left + r.width * 0.50; const cy = r.top + r.height * 0.32; mx = e.clientX - cx; my = e.clientY - cy; lastMove = performance.now(); }; const tick = (now) => { const since = now - lastMove; let tx, ty; if (mx !== null && since < 1600) { const len = Math.hypot(mx, my); const maxLen = 260; const k = Math.min(1, len / maxLen); const ang = Math.atan2(my, mx); tx = Math.cos(ang) * k; ty = Math.sin(ang) * k * 0.85; } else { // Idle scan — slow circle const a = (now / 2200) * Math.PI; tx = Math.cos(a) * 0.70; ty = Math.sin(a) * 0.30 + 0.05; } const MAX = eyes.maxOffset; cur.x += (tx * MAX - cur.x) * 0.12; cur.y += (ty * MAX - cur.y) * 0.12; const t = `translate(${cur.x.toFixed(2)} ${cur.y.toFixed(2)})`; if (leftEyeRef.current) leftEyeRef.current.setAttribute('transform', t); if (rightEyeRef.current) rightEyeRef.current.setAttribute('transform', t); // Body tilt — much subtler than the pupils const tiltMaxX = 3.5; // yaw (deg) const tiltMaxY = 2.2; // pitch (deg) let ttx = 0, tty = 0; if (mx !== null && since < 1800) { ttx = Math.max(-1, Math.min(1, mx / 500)) * tiltMaxX; tty = Math.max(-1, Math.min(1, my / 500)) * tiltMaxY; } tilt.x += (ttx - tilt.x) * 0.06; tilt.y += (tty - tilt.y) * 0.06; if (innerRef.current) { innerRef.current.style.transform = `rotateY(${tilt.x.toFixed(2)}deg) rotateX(${(-tilt.y).toFixed(2)}deg)`; } raf = requestAnimationFrame(tick); }; window.addEventListener('mousemove', onMove, { passive: true }); raf = requestAnimationFrame(tick); return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(raf); }; }, [eyes.maxOffset]); const imgSrc = covered ? 'assets/galaxia-mascot-blank-v6.png' : 'assets/galaxia-mascot.png'; // ── Drawing helpers ─────────────────────────────────────────── // Friendly cyan "happy" eye glyph — drawn in screen coords. // Renders a glowing lens-shape (lemon outline) so the eye looks like // the original closed-arc happy face, with a pupil inside that tracks. const HappyEye = ({ cx, cy, mirror = false }) => { const W = 64; // half-width const HT = 30; // top curve height const HB = 6; // bottom curve depth // Lemon-shaped path with a slight upturn at the OUTER corner. // mirror=true flips the upturn for the right eye. const tipL = mirror ? cx - W : cx - W - 2; const tipR = mirror ? cx + W + 2 : cx + W; const lift = mirror ? -3 : -3; return ( {/* Soft halo behind the eye */} {/* Main happy lens — solid cyan */} {/* Inner highlight band — softens the top edge into a smile */} {/* Pupil — tracks mouse via the wrapping g translate */} ); }; return (

{/* Halo behind the whole mascot */} ); } /* ───────────────────────────────────────────────────────────── Variant A — Operational Core (rotating ring, no lines) Cards orbit the mascot — full revolution every 12s (≈ one chip step every 2s). No connector lines: motion + glow alone carry the "system alive" feeling. ────────────────────────────────────────────────────────────── */ /* Card · Pods — vertical glass capsule with LED + big icon */ function PodCard({ step }) { return (

{/* Top highlight bar */} ); } /* Card · Tactical — wide bracketed terminal module */ function TacticalCard({ step }) { const n = (SYSTEM_STEPS.findIndex(s => s.id === step.id) + 1).toString().padStart(2,'0'); return (

{/* Faint scanline texture */}

{/* Corner brackets */} {[ { c: 'top-0 left-0', borderClass: 'border-t-2 border-l-2' }, { c: 'top-0 right-0', borderClass: 'border-t-2 border-r-2' }, { c: 'bottom-0 left-0', borderClass: 'border-b-2 border-l-2' }, { c: 'bottom-0 right-0', borderClass: 'border-b-2 border-r-2' }, ].map((b, i) => (

); } /* Card · Benefit — premium pod with a big number front-and-center. Used by the orbital while it rotates around the brand video. */ function BenefitCard({ b }) { return (

{/* Subtle cyan tint overlay — gives the glassy hint without translucency */}

{/* Top highlight bar */} ); } /* ───────────────────────────────────────────────────────────── OperationalCorePerimeter — v3-only orbital path. Cards travel a single continuous rounded-rectangle path around the video. Card center sits 5px inside the video edge so each card just barely overlaps the rectangle, covering most of the visible border without intruding on the mascot. ────────────────────────────────────────────────────────────── */ function OperationalCorePerimeter() { /* V3 polish ADDENDUM (2026-05-18) — segunda reducción tras feedback de Codex/Martin: video dominaba demasiado, bordes muy visibles. Bajamos videoW 400→300 (escala adicional 0.75) y aire entre cards. Breakpoint xl mantiene (orbital solo ≥1280) y dimensiones calibradas para que en ese viewport quede ~50px de margen real en el slot xl:col-span-6 (552). Originales template: containerW=920, H=720, video 640×360, cards 136×156, TOTAL=12. Reducción final ~0.47× video, 0.59× cards, TOTAL=8. */ const containerW = 540; const containerH = 400; const videoW = 300, videoH = 170; const cardW = 80, cardH = 96; const overlap = 4; // px the card body crosses INTO the video const cy0 = containerH / 2 - 30; // raised 30px so the // hero composition feels // visually centered with // headline copy above. const halfPathW = videoW / 2 + (cardW / 2 - overlap); // 186 const halfPathH = videoH / 2 + (cardH / 2 - overlap); // 129 const r = 28; // corner radius (was 40) const sW = 2 * halfPathW - 2 * r; // top/bot straight length const sH = 2 * halfPathH - 2 * r; // left/right straight length const arcLen = (Math.PI / 2) * r; const perim = 2 * sW + 2 * sH + 4 * arcLen; const TOTAL = 8; // V3: matches BENEFITS.length const PERIOD_MS = 28000; const slotRefs = useRefV2([]); if (slotRefs.current.length !== TOTAL) slotRefs.current = Array(TOTAL).fill(null); // Convert t∈[0,1] → (xRel, y) on the rounded rectangle. const posAt = (t) => { let d = (((t % 1) + 1) % 1) * perim; // 0 — TOP straight if (d <= sW) return { x: -halfPathW + r + d, y: cy0 - halfPathH }; d -= sW; // 1 — TOP-RIGHT arc if (d <= arcLen) { const a = (d / arcLen) * (Math.PI / 2) - Math.PI / 2; return { x: (halfPathW - r) + r * Math.cos(a), y: (cy0 - halfPathH + r) + r * Math.sin(a), }; } d -= arcLen; // 2 — RIGHT straight if (d <= sH) return { x: halfPathW, y: cy0 - halfPathH + r + d }; d -= sH; // 3 — BOTTOM-RIGHT arc if (d <= arcLen) { const a = (d / arcLen) * (Math.PI / 2); return { x: (halfPathW - r) + r * Math.cos(a), y: (cy0 + halfPathH - r) + r * Math.sin(a), }; } d -= arcLen; // 4 — BOTTOM straight if (d <= sW) return { x: halfPathW - r - d, y: cy0 + halfPathH }; d -= sW; // 5 — BOTTOM-LEFT arc if (d <= arcLen) { const a = (d / arcLen) * (Math.PI / 2) + Math.PI / 2; return { x: (-halfPathW + r) + r * Math.cos(a), y: (cy0 + halfPathH - r) + r * Math.sin(a), }; } d -= arcLen; // 6 — LEFT straight if (d <= sH) return { x: -halfPathW, y: cy0 + halfPathH - r - d }; d -= sH; // 7 — TOP-LEFT arc const a = (d / arcLen) * (Math.PI / 2) + Math.PI; return { x: (-halfPathW + r) + r * Math.cos(a), y: (cy0 - halfPathH + r) + r * Math.sin(a), }; }; useEffectV2(() => { const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce) { for (let i = 0; i < TOTAL; i++) { const el = slotRefs.current[i]; if (!el) continue; const p = posAt(i / TOTAL); el.style.top = `${p.y.toFixed(1)}px`; el.style.left = `calc(50% + ${p.x.toFixed(1)}px)`; el.style.opacity = '1'; } return; } let raf = 0; const t0 = performance.now(); const loop = (now) => { const baseT = (now - t0) / PERIOD_MS; for (let i = 0; i < TOTAL; i++) { const el = slotRefs.current[i]; if (!el) continue; const t = (baseT + i / TOTAL) % 1; const p = posAt(t); el.style.top = `${p.y.toFixed(1)}px`; el.style.left = `calc(50% + ${p.x.toFixed(1)}px)`; el.style.opacity = '1'; } raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); return (

{/* Brand video — raised 80px from container center. */}

{/* Cards on the perimeter — always alpha=1; updated per rAF tick. */} {Array.from({ length: TOTAL }).map((_, i) => (

{ slotRefs.current[i] = el; }} style={{ top: 0, left: '50%', transform: 'translate(-50%, -50%)', zIndex: 20, willChange: 'top, left' }}>

))}

); } /* ───────────────────────────────────────────────────────────── V3 polish ADDENDUM (2026-05-18) — nueva dirección ───────────────────────────────────────────────────────────── GalaxiaVideo retirado del hero (movido al Footer). Composición nueva: mascot GalaxIA fijo abajo-derecha apuntando hacia arriba-izquierda, una tarjeta grande destacada donde apunta + 4 chips queue de las capacidades próximas. El featured card rota a través de las 8 capacidades en ciclo, sin repetir simultáneamente. ────────────────────────────────────────────────────────────── */ /* V3 polish ADDENDUM 2 — UX/UI Pro Max (2026-05-18) Card premium glass-cyber, mucho más grande (320×220), icono prominente, verbo serif 42px con glow medido, label cyan/mono, sub legible. Reemplaza el chip pequeño anterior que no se veía premium. */ function FeaturedBenefitCard({ b }) { return (

{/* Inner glow corners (cyan TL + violet faint BR) para profundidad */}

{/* Top highlight bar — cyan scan suave */}

{/* Bottom subtle accent */}

{/* TL: ON LED + label */}

capacidad · live

{/* TR: Index "N0X / 08" — UX/UI: muestra posición y total */}

N{(BENEFITS.findIndex(x => x.id === b.id) + 1).toString().padStart(2, '0')} / 08

{/* Body — left-aligned premium typography */}

{b.value}

{b.label}

{b.sub}

); } function HeroFeaturedCarousel() { /* V3 polish ADDENDUM 2 (2026-05-18) — UX/UI Pro Max: - GalaxIA más chico (200px width vs 240px previo). - Card destacada mucho más grande (320×220 vs 180×~auto previo). - Composición: card upper-left, mascot bottom-right con finger pointing up-left hacia la card. Overlap parcial intencionado. - Queue chips reemplazados por stepper indicator de 8 segmentos (más elegante, comunica "carrusel" sin saturar). - Asset transparente real (galaxia-pointing-transparent.png con alpha generado vía PIL eliminando el checkerboard de la fuente RGB). */ const containerW = 580; const containerH = 440; const CYCLE_MS = 4200; // 4.2s × 8 = 33.6s ciclo completo (premium pace) const [activeIdx, setActiveIdx] = useStateV2(0); useEffectV2(() => { if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const id = setInterval(() => { setActiveIdx(i => (i + 1) % BENEFITS.length); }, CYCLE_MS); return () => clearInterval(id); }, []); const featured = BENEFITS[activeIdx]; /* V3 polish ADDENDUM 3 (2026-05-18) — el video reaparece en el hero pero ahora como HALO difuminado de marca detrás de la card y el mascot. Mask muy agresiva + opacity 0.55 + scale grande para que sea TEXTURA, no rectángulo. Posicionado ligeramente desplazado hacia el mascot para reforzar el foco diagonal card → mascot. */ const heroHaloMask = 'radial-gradient(ellipse 50% 56% at 50% 50%,' + ' #000 0%, #000 6%,' + ' rgba(0,0,0,0.78) 22%, rgba(0,0,0,0.52) 38%,' + ' rgba(0,0,0,0.30) 54%, rgba(0,0,0,0.14) 70%,' + ' rgba(0,0,0,0.05) 84%, transparent 100%)'; return (

{/* Halo de video — capa z=0, detrás de todo. Funciona como brand motion texture, no como protagonista. Más grande que el container y desplazado hacia el cuadrante donde está el mascot para dar profundidad direccional. */}

{/* Overlay con bg-color radial — borra pixels lit cerca del borde. */}

{/* Featured card — sweet spot upper-left, en la dirección a la que apunta el dedo de GalaxIA (up-left desde su posición bottom-right). El `key={featured.id}` fuerza remontaje en cada tick → crossfade limpio. Sin tarjetas repetidas simultáneamente (única card visible a la vez). */}

{/* Mascot GalaxIA — bottom-right, más chico que antes (200px), con asset transparente real. Overlap parcial intencionado sobre la card en el área inferior-derecha. Z superior para que el finger quede al frente del visual. Sin glow excesivo (drop-shadow medido). */}

{/* Stepper indicator — 8 segmentos bottom-left bajo la card. Activo es más ancho + cyan glow; resto son outlines tenues. Comunica "carrusel de 8 capacidades" sin saturar el visual con queue chips o mini cards. */}

{BENEFITS.map((_, i) => ( ))}

); } function OperationalCore({ style = 'pods', eyesStyle = 'covered' }) { // ── Perimeter mode (v3) ────────────────────────────────────────── // When the host page sets `window.__NG_PERIMETER = true`, cards stop // falling in two vertical columns and instead orbit the video as a // single fluid rectangle: top → right → bottom → left → repeat. // Each card center traces a rounded-rectangle path 5px inside the // video edge, so the cards barely overlap the rectangle and cover // most of the visible border without intruding on the mascot. const PERIMETER_MODE = typeof window !== 'undefined' && window.__NG_PERIMETER === true; if (PERIMETER_MODE) { return ; } // Falling-columns design: two vertical columns of benefit cards stream // continuously from the top of the hero, pass IN FRONT of the video // (each card's center aligned to the video's left/right vertical edge), // and fade out below the video down to the bottom of the column. // A new card fades in from the top as one fades out at the bottom — // the stream is endless. const NUM_PER_SIDE = 5; const TOTAL = NUM_PER_SIDE * 2; const PERIOD_MS = 22000; // Native video is 848×478 (~16:9). We render at 640×360 so even with the // GalaxiaVideo internal zoom of 1.22× the source pixels stay below native // resolution (~781×439) — no upscaling, no quality loss. const containerW = 880; const containerH = 620; const videoW = 640, videoH = 360; // Move the video down inside the column so it sits below the top. const videoOffsetY = -150; // Vertical lifecycle anchors (px from top of container). const cardH = 156; // approx card height const startY = -cardH * 0.5; // off-screen above const endY = containerH + cardH * 0.5; // off-screen below const videoTop = (containerH - videoH) / 2 + videoOffsetY; const videoBot = (containerH + videoH) / 2 + videoOffsetY; const slotRefs = useRefV2([]); if (slotRefs.current.length !== TOTAL) slotRefs.current = Array(TOTAL).fill(null); useEffectV2(() => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; let raf = 0; const t0 = performance.now(); const loop = (now) => { const baseT = (now - t0) / PERIOD_MS; for (let i = 0; i < TOTAL; i++) { const el = slotRefs.current[i]; if (!el) continue; const side = i < NUM_PER_SIDE ? 'left' : 'right'; const indexInSide = i % NUM_PER_SIDE; // Cards on both columns travel in sync — same phase per row index // so the left and right cards rise together. const phaseOffset = indexInSide / NUM_PER_SIDE; const t = ((baseT + phaseOffset) % 1 + 1) % 1; // BOTTOM → TOP travel: y starts at endY (below the column) and // ends at startY (above the column) over the cycle. const y = endY - t * (endY - startY); // Cards straddle the video's vertical edges: the inner half of each // card sits ON the video, physically covering the rectangle edge // with a solid surface. As the mascot rises/breathes, the cards // ignite in sync (CSS ng-ignite animation). const x = side === 'left' ? -videoW / 2 + 20 : +videoW / 2 - 20; // Opacity envelope (mirror of the previous top-to-bottom flow): // below the video → fade IN from 0 to 1 as it rises toward the band // on the video band → 1 // above the video → fade OUT from 1 to 0 until off-screen let alpha; if (y > videoBot) { alpha = (endY - y) / (endY - videoBot); } else if (y > videoTop) { alpha = 1; } else { alpha = (y - startY) / (videoTop - startY); } alpha = Math.max(0, Math.min(1, alpha)); el.style.top = `${y.toFixed(1)}px`; el.style.left = `calc(50% + ${x.toFixed(1)}px)`; el.style.opacity = alpha.toFixed(3); } raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); return (

{/* Brand video — centered horizontally, shifted up by videoOffsetY. */}

{/* Falling benefit cards. Each card's top/left/opacity updates per frame. z=20 so they always pass in FRONT of the video. */} {Array.from({ length: TOTAL }).map((_, i) => (

{ slotRefs.current[i] = el; }} style={{ top: 0, left: '50%', transform: 'translate(-50%, -50%)', zIndex: 20, willChange: 'top, opacity' }}>

))}

); } /* V3 polish ADDENDUM 5 (2026-05-18) — pivot a "video-only" en el hero derecho. Por instrucción de Martin/Codex se retiran del hero: mascot GalaxIA, card destacada, carrusel rotativo, stepper, chips, FeaturedBenefitCard y HeroFeaturedCarousel. El slot derecho ahora muestra SOLO el video como halo difuminado. El canvas de puntitos del background vuelve a verse (se removió bg-bg del

). Una transición suave fade-to-bg cierra el hero hacia la sección siguiente sin línea marcada. */ function HeroVideoOnly() { const containerW = 580; const containerH = 440; // Máscara radial muy agresiva — el video tiene que ser textura, no rectángulo. const heroHaloMask = 'radial-gradient(ellipse 50% 56% at 50% 50%,' + ' #000 0%, #000 8%,' + ' rgba(0,0,0,0.82) 22%, rgba(0,0,0,0.58) 38%,' + ' rgba(0,0,0,0.34) 54%, rgba(0,0,0,0.16) 70%,' + ' rgba(0,0,0,0.06) 84%, transparent 100%)'; return (

{/* Overlay bg-color radial — borra cualquier pixel lit residual en bordes sin afectar el centro del halo. */}

); } function HeroOrbital({ eyebrow, headline, subheadline, coreStyle = 'pods', eyesStyle = 'covered' }) { const Reveal = window.Reveal; /* V3 polish ADDENDUM 8 (2026-05-18) — CENTERED HERO + favicon. Hero limpio, narrativo, premium. SIN video, SIN mascot PNG, SIN card, SIN carrusel, SIN stepper, SIN chips. Título centrado, subtítulo centrado, CTAs centrados, cue centrado apuntando a #agente. Background queda gobernado por el canvas global de puntitos (background.jsx fixed canvas + .vignette::after overlay) — visible como atmósfera sutil en toda la sección sin competir con el copy. */ return (

{/* Contenido del hero — vertical y horizontal centered. max-w-[1100px] da márgenes generosos. Padding vertical generoso para aire. gap-7 uniforme entre bloques narrativos para jerarquía clara. */}

{/* V3 polish ADDENDUM 29 (2026-05-18) — AIEmployeesMenu mobile oculto. Decisión Martin: los accesos públicos a las landings verticales externas quedan ocultos hasta mejorar esas webs. El componente sigue exportado a `window.AIEmployeesMenu` (stub que retorna null) como dead-code reversible. Para restaurar: descomentar el bloque siguiente y reponer el cuerpo de la función en sections.jsx. */} {/*

{typeof window !== 'undefined' && window.AIEmployeesMenu ? : null}

*/}

); } /* ───────────────────────────────────────────────────────────── Variant B — Agent Plan Constellation Vertical agent plan with 4 phases. Each phase is a glass row with status icon + label + source tags. Side chips float in 3D parallax. ────────────────────────────────────────────────────────────── */ function PlanRow({ phase, index, current }) { const isDone = index < current; const isLive = index === current; const statusIcon = isDone ? '✓' : isLive ? '⚡' : '◌'; const statusColor = isDone ? 'text-cyan' : isLive ? 'text-cyan' : 'text-ink/35'; return (

{/* Status icon + line */}

{statusIcon} {isLive && ( )}

{/* Phase content */}

0{index+1} {phase.label}

{phase.sub}

{phase.tags.map(t => ( {t} ))}

); } function AgentPlanConstellation() { const current = useStepLoop(PLAN_PHASES.length, 1700); return (

{/* Atmospheric backdrop */}

{/* Header */}

Agent plan · live

turno #{1240 + current}

{/* Connector line behind phases */}

); } function HeroPipeline({ eyebrow, headline, subheadline }) { const Reveal = window.Reveal; return (

); } /* ───────────────────────────────────────────────────────────── Variant C — Aurora Gateway Centered hero. Behind it, slow aurora beams drift down toward a gateway at the bottom; 6 source chips float along the beams. ────────────────────────────────────────────────────────────── */ function AuroraBeams() { // Three angled light beams + a horizontal aurora ribbon. return (

{/* Aurora ribbon — horizontal, soft */}

{/* Vertical beams */} {[ { left: '14%', tilt: -6, delay: '0s', w: 240, opacity: 0.28 }, { left: '38%', tilt: 4, delay: '1.4s', w: 280, opacity: 0.22 }, { left: '64%', tilt: -3, delay: '2.6s', w: 260, opacity: 0.26 }, { left: '82%', tilt: 7, delay: '0.7s', w: 220, opacity: 0.20 }, ].map((b, i) => (

))} {/* Faint vertical lines (rays) */} {[20, 32, 50, 62, 78, 88].map((x, i) => (

))} {/* Horizon glow at bottom — where the gateway opens */}

{/* Grid (very subtle) — adds depth */}

); } function AuroraFloatingChips() { // 6 chips drifting at various depths within the aurora area. // Positioned at far edges so the centered headline (max-w 1100) stays clean // on viewports >= xl (1280px). Hidden below that. const seats = [ { id: 'msg', style: { left: '18px', top: '14%' }, delay: '0s', scale: 1.0 }, { id: 'rule', style: { left: '34px', top: '48%' }, delay: '0.6s', scale: 0.92 }, { id: 'crm', style: { left: '20px', top: '78%' }, delay: '1.0s', scale: 0.9 }, { id: 'decision', style: { right: '18px', top: '14%' }, delay: '0.3s', scale: 0.95 }, { id: 'followup', style: { right: '34px', top: '48%' }, delay: '1.4s', scale: 0.9 }, { id: 'team', style: { right: '20px', top: '78%' }, delay: '0.8s', scale: 0.95 }, ]; return ( ); } function HeroPortal({ eyebrow, headline, subheadline }) { const Reveal = window.Reveal; return (

{/* Aurora behind everything */}

{/* Ambient floating chips */}

{/* Centered hero copy */}

{/* Gateway horizon arc */}

); } /* ───────────────────────────────────────────────────────────── Dispatcher ────────────────────────────────────────────────────────────── */ function HeroV2(props) { const raw = props.variant || 'orbital'; const variant = raw === 'stack' ? 'orbital' : raw === 'split' ? 'pipeline' : raw; const eyebrow = props.eyebrow || 'Inteligencia operativa para empresas'; const headline = props.headline || 'Empleados IA\nque entienden tu negocio\ny trabajan con *tus reglas*.'; const subheadline = props.subheadline || 'Atienden clientes, consultan datos, siguen procesos, detectan oportunidades y avisan al equipo cuando hace falta. Abajo vas a ver uno operando en una conversación real.'; const coreStyle = props.coreStyle || 'pods'; const eyesStyle = props.eyesStyle || 'covered'; const common = { eyebrow, headline, subheadline }; switch (variant) { case 'pipeline': return ; case 'portal': return ; case 'orbital': default: return ; } } window.Hero = HeroV2;

{text.split('\n').map(renderLine)}