all changes

src/sections/Problem.tsx

@@ -0,0 +1,76 @@
+'use client';
+import { motion } from 'framer-motion';
+import type { ThemeProps } from '../types';
+
+export const Problem = ({ isNavyBg }: ThemeProps) => {
+  const bg     = isNavyBg ? '#0d1117' : '#f5f5f3';
+  const text   = isNavyBg ? '#eef0f4' : '#0a0a0a';
+  const sub    = isNavyBg ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.4)';
+  const border = isNavyBg ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)';
+
+  return (
+    <section
+      aria-labelledby="problem-heading"
+      className="px-8 py-24 md:px-14 transition-colors duration-500"
+      style={{ background: bg, borderBottom: `1px solid ${border}` }}
+    >
+      <motion.div
+        className="mx-auto max-w-7xl"
+        initial={{ opacity: 0, y: 28 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: false, amount: 0.15 }}
+        transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }}
+      >
+        <div>
+          <h2
+            id="problem-heading"
+            className="text-display"
+            style={{ lineHeight: 1.0, letterSpacing: '-0.02em', color: text }}
+          >
+            {['La mayoría', 'de los problemas', 'operativos son'].map((line, i) => (
+              <motion.span
+                key={line}
+                className="block"
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: i * 0.07, ease: [0.22, 1, 0.36, 1] }}
+              >
+                {line}
+              </motion.span>
+            ))}
+            <motion.span
+              className="block text-brand-red"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.6, delay: 0.24, ease: [0.22, 1, 0.36, 1] }}
+            >
+              problemas de sistema.
+            </motion.span>
+          </h2>
+
+          <motion.div
+            initial={{ opacity: 0, y: 12 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.45 }}
+            className="mt-12 flex gap-4"
+            style={{ maxWidth: '56ch' }}
+          >
+            <span
+              className="mt-1 shrink-0 block"
+              style={{ background: '#3b82f6', minHeight: '100%', width: 2, borderRadius: 2, alignSelf: 'stretch', opacity: 0.7 }}
+            />
+            <p className="text-base leading-relaxed" style={{ color: sub }}>
+              Software que impone sus propias reglas en lugar de adaptarse
+              a la operación. Procesos que permanecen manuales porque nadie
+              los diseñó para escalar. Ambos tienen la misma raíz: ausencia
+              de arquitectura.
+            </p>
+          </motion.div>
+        </div>
+      </motion.div>
+    </section>
+  );
+};