/* NOSOTROS — historia, misión, visión, valores y equipo */
const { useEffect: useEffectNos, useRef: useRefNos } = React;

/* ── Hero ─────────────────────────────────────────────────── */
const NosHero = () => (
  <section className="page-hero" style={{ paddingBottom: 80 }}>
    <div className="page-hero-bg" />
    <div className="container">
      <div className="crumb"><a href="../index.html">Inicio</a><span className="sep">/</span><span>Nosotros</span></div>
      <div style={{ maxWidth: 760 }}>
        <h1>Software que se construye con<br /><span className="grad">propósito, no solo con código.</span></h1>
        <p className="lede">Construimos tecnología con un enfoque absoluto en la calidad y la ingeniería. Desarrollamos soluciones de software a medida y productos SaaS robustos, diseñados para integrarse a la operación de empresas modernas, impulsando su escalabilidad y construyendo alianzas de largo plazo basadas en la transparencia y la innovación tecnológica.</p>
        <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
          <a href="contacto.html" className="btn btn-primary">Hablar con el equipo</a>
          <a href="proceso.html" className="btn btn-secondary">Cómo trabajamos →</a>
        </div>
      </div>
    </div>
  </section>
);

/* ── Stats ────────────────────────────────────────────────── */
const NosStats = () => (
  <section style={{ padding: '0 0 64px' }}>
    <div className="container">
      <div className="big-num-grid">
        <div className="big-num"><div className="n"><span className="grad">A medida</span></div><div className="l">Software empresarial</div></div>
        <div className="big-num"><div className="n"><span className="grad">3</span></div><div className="l">Productos SaaS propios</div></div>
        <div className="big-num"><div className="n"><span className="grad">100%</span></div><div className="l">Arquitectura escalable</div></div>
        <div className="big-num"><div className="n"><span className="grad">Continuo</span></div><div className="l">Soporte y evolución</div></div>
      </div>
    </div>
  </section>
);

/* ── Historia ─────────────────────────────────────────────── */
const NosHistoria = () => (
  <section className="section section-soft" style={{ borderTop: '1px solid var(--border)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>

        <div>
          <div className="section-eyebrow">Historia</div>
          <h2 style={{ fontSize: 'clamp(28px, 3.5vw, 40px)', fontWeight: 700, letterSpacing: '-0.02em', margin: '0 0 24px', lineHeight: 1.2 }}>
            El problema fundamental del software empresarial.
          </h2>
          <p style={{ fontSize: 16, color: 'var(--fg-soft)', lineHeight: 1.7, marginBottom: 20 }}>
            A nivel global, miles de compañías adaptan sus procesos operativos a software genérico que no termina de encajar en su realidad, o asumen costos por licencias sobredimensionadas donde solo aprovechan una fracción de las capacidades.
          </p>
          <p style={{ fontSize: 16, color: 'var(--fg-soft)', lineHeight: 1.7, marginBottom: 20 }}>
            Ante esta brecha constante entre las operaciones empresariales y la tecnología disponible, se consolida Martz Forge. La empresa nace no como una simple consultora tecnológica, sino como un aliado estratégico dedicado a crear soluciones precisas y escalables, así como un ecosistema propio de productos SaaS.
          </p>
          <p style={{ fontSize: 16, color: 'var(--fg-soft)', lineHeight: 1.7, marginBottom: 32 }}>
            Nuestro compromiso central es construir relaciones de largo plazo a través de software confiable, transparente y cimentado sobre los más altos estándares de ingeniería de la industria.
          </p>
          <div style={{ padding: '20px 24px', background: 'var(--bg)', borderRadius: 12, border: '1px solid var(--border)', borderLeft: '3px solid var(--green)' }}>
            <p style={{ fontSize: 15, fontStyle: 'italic', color: 'var(--fg-soft)', margin: '0 0 12px', lineHeight: 1.6 }}>
              "La tecnología debe ser el catalizador del crecimiento, no una limitante. Esa premisa guía la arquitectura detrás de cada línea de código que desarrollamos."
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 38, height: 38, borderRadius: '50%', background: 'rgba(34,197,94,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#22c55e', fontSize: 14, fontWeight: 700 }}>JM</div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg)' }}>Jonathan Martínez</div>
                <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>Fundador · Martz Forge</div>
              </div>
            </div>
          </div>
        </div>

        {/* Timeline visual */}
        <div>
          {[
            { year: 'Fundación', label: 'Bases de Ingeniería', desc: 'Establecimiento de Martz Forge y definición de nuestros estándares técnicos para el desarrollo de software a medida.' },
            { year: 'Arquitectura', label: 'Ecosistema de Plataformas', desc: 'Diseño de la infraestructura base para soportar la creación de múltiples productos escalables y seguros.' },
            { year: 'Producto', label: 'Inicio de Martz POS', desc: 'Comienza el desarrollo de nuestra solución SaaS principal enfocada en la gestión eficiente de negocios.' },
            { year: 'En progreso', label: 'Martz Hospitality & Health', desc: 'Expansión de nuestro catálogo hacia soluciones especializadas para alojamientos y el sector salud.' },
            { year: 'Futuro', label: 'Expansión Global', desc: 'Posicionamiento como referentes tecnológicos internacionales, creando soluciones que impacten la industria.' },
          ].map((m, i, arr) => (
            <div key={i} style={{ display: 'flex', gap: 20, marginBottom: i < arr.length - 1 ? 0 : 0 }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: 40, flexShrink: 0 }}>
                <div style={{ width: 40, height: 40, borderRadius: '50%', background: i === arr.length - 1 ? 'var(--grad)' : 'rgba(34,197,94,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid var(--green)', flexShrink: 0 }}>
                  {i === arr.length - 1
                    ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
                    : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
                  }
                </div>
                {i < arr.length - 1 && <div style={{ width: 2, flex: 1, background: 'var(--border)', margin: '6px 0' }} />}
              </div>
              <div style={{ paddingBottom: i < arr.length - 1 ? 32 : 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                  <span style={{ fontSize: 12, fontWeight: 700, color: '#22c55e', fontFamily: 'JetBrains Mono, monospace' }}>{m.year}</span>
                  <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg)' }}>{m.label}</span>
                </div>
                <p style={{ fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.6, margin: 0 }}>{m.desc}</p>
              </div>
            </div>
          ))}
        </div>

      </div>
    </div>
  </section>
);

/* ── Misión y Visión ──────────────────────────────────────── */
const NosMisionVision = () => (
  <section className="section">
    <div className="container">
      <div className="section-head">
        <div className="section-eyebrow">Propósito</div>
        <h2 className="section-title">Por qué <span className="grad">existimos</span></h2>
        <p className="section-sub">Somos un aliado estratégico. Desarrollamos tecnología con fundamentos sólidos que transforma radicalmente la eficiencia operativa de las organizaciones.</p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>

        <div style={{ padding: 36, background: 'var(--navy-950)', borderRadius: 16, border: '1px solid rgba(255,255,255,0.07)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160, borderRadius: '50%', background: 'radial-gradient(circle, rgba(34,197,94,0.12) 0%, transparent 70%)', pointerEvents: 'none' }} />
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 14px', borderRadius: 100, background: 'rgba(34,197,94,0.12)', border: '1px solid rgba(34,197,94,0.25)', marginBottom: 20 }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" /></svg>
            <span style={{ fontSize: 11, fontWeight: 700, color: '#22c55e', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.06em' }}>MISIÓN</span>
          </div>
          <h3 style={{ fontSize: 'clamp(20px, 2.2vw, 26px)', fontWeight: 700, color: '#fff', margin: '0 0 16px', lineHeight: 1.3, letterSpacing: '-0.01em' }}>
            Que el software se adapte al usuario, no al revés.
          </h3>
          <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.55)', lineHeight: 1.7, margin: 0 }}>
            Desarrollar soluciones e infraestructura de software verdaderamente innovadoras, garantizando que las empresas logren optimizar sus operaciones y acelerar su crecimiento mediante tecnología que encaja de forma nativa en su contexto de negocio.
          </p>
        </div>

        <div style={{ padding: 36, background: 'var(--bg-soft)', borderRadius: 16, border: '1px solid var(--border)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160, borderRadius: '50%', background: 'radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 70%)', pointerEvents: 'none' }} />
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 14px', borderRadius: 100, background: 'rgba(6,182,212,0.1)', border: '1px solid rgba(6,182,212,0.2)', marginBottom: 20 }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#06b6d4" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="2" /><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" /></svg>
            <span style={{ fontSize: 11, fontWeight: 700, color: '#06b6d4', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.06em' }}>VISIÓN</span>
          </div>
          <h3 style={{ fontSize: 'clamp(20px, 2.2vw, 26px)', fontWeight: 700, color: 'var(--fg)', margin: '0 0 16px', lineHeight: 1.3, letterSpacing: '-0.01em' }}>
            Liderazgo tecnológico global.
          </h3>
          <p style={{ fontSize: 15, color: 'var(--fg-muted)', lineHeight: 1.7, margin: 0 }}>
            Convertirnos en el aliado tecnológico de referencia para organizaciones globales, impulsando su evolución a través del desarrollo de software empresarial y productos SaaS que redefinen la calidad técnica e innovación.
          </p>
        </div>

      </div>
    </div>
  </section>
);

/* ── Valores ──────────────────────────────────────────────── */
const valores = [
  {
    key: 'innovacion',
    icon: <><path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z" /><path d="M5 3l1 2.5L8.5 6 6 7.5 5 10 4 7.5 1.5 6 4 4.5z" opacity="0.5" /></>,
    color: '#22c55e',
    title: 'Innovación Pragmática',
    sub: 'Implementamos lo que genera impacto, no lo que es tendencia.',
    desc: 'Evaluamos constantemente nuevas herramientas bajo un estricto rigor técnico. Adoptamos tecnologías emergentes como Inteligencia Artificial únicamente cuando demuestran una mejora sustancial en los resultados del negocio.',
    ejemplos: ['Análisis previo a la implementación', 'Validación técnica exhaustiva', 'Mejora continua'],
  },
  {
    key: 'compromiso',
    icon: <><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01" /></>,
    color: '#06b6d4',
    title: 'Compromiso Absoluto',
    sub: 'Cumplimos con rigor cada meta acordada.',
    desc: 'La previsibilidad es nuestra norma. Mantenemos expectativas realistas, visibilidad total sobre el avance de los desarrollos y aseguramos que los entregables cumplan con su propósito en los tiempos establecidos.',
    ejemplos: ['Transparencia en la gestión', 'Cronogramas certeros', 'Visibilidad completa del avance'],
  },
  {
    key: 'calidad',
    icon: <><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></>,
    color: '#a78bfa',
    title: 'Excelencia Técnica',
    sub: 'Sistemas resilientes, seguros y escalables.',
    desc: 'Nuestra prioridad es la estabilidad operativa. Diseñamos arquitecturas robustas que operan sin fricciones desde el primer día y están preparadas para escalar a largo plazo con mínimos costos de mantenimiento.',
    ejemplos: ['Documentación técnica detallada', 'Testing y control de calidad riguroso', 'Sistemas autónomos'],
  },
  {
    key: 'honestidad',
    icon: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></>,
    color: '#f59e0b',
    title: 'Integridad',
    sub: 'Asesoramiento honesto, por encima de todo.',
    desc: 'Anteponemos el valor estratégico del cliente. Si una solución estándar resuelve la necesidad corporativa de manera eficiente, lo indicamos; solo sugerimos desarrollos a medida donde garantizan un retorno claro de inversión.',
    ejemplos: ['Evaluación objetiva del retorno', 'Evitamos sobreingeniería', 'Métricas de éxito demostrables'],
  },
];

const NosValores = () => (
  <section className="section section-soft" style={{ borderTop: '1px solid var(--border)' }}>
    <div className="container">
      <div className="section-head">
        <div className="section-eyebrow">Valores</div>
        <h2 className="section-title">Lo que guía <span className="grad">cada decisión</span></h2>
        <p className="section-sub">No son valores de pared — son los criterios con los que decidimos qué proyectos tomar, cómo comunicarnos y cómo entregar.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
        {valores.map((v, i) => (
          <div key={v.key} style={{ padding: '28px 28px 24px', background: 'var(--bg)', borderRadius: 14, border: '1px solid var(--border)', transition: 'box-shadow 0.2s, transform 0.2s' }}
            onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={e => { e.currentTarget.style.boxShadow = ''; e.currentTarget.style.transform = ''; }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16, marginBottom: 16 }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: v.color + '15', border: '1px solid ' + v.color + '30', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={v.color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{v.icon}</svg>
              </div>
              <div>
                <h3 style={{ fontSize: 17, fontWeight: 700, margin: '0 0 4px', color: 'var(--fg)' }}>{v.title}</h3>
                <p style={{ fontSize: 13, color: v.color, margin: 0, fontWeight: 500 }}>{v.sub}</p>
              </div>
            </div>
            <p style={{ fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.65, margin: '0 0 16px' }}>{v.desc}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {v.ejemplos.map((e, j) => (
                <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={v.color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
                  <span style={{ fontSize: 13, color: 'var(--fg-soft)' }}>{e}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ── Equipo ───────────────────────────────────────────────── */
const NosEquipo = () => (
  <section className="section">
    <div className="container">
      <div className="section-head">
        <div className="section-eyebrow">Equipo</div>
        <h2 className="section-title">Las personas detrás <span className="grad">del código</span></h2>
        <p className="section-sub">Un equipo intencionalmente pequeño. Cada proyecto tiene atención directa de quien lo construye.</p>
      </div>

      <div style={{ maxWidth: 800, margin: '0 auto' }}>
        {/* Fundador - tarjeta principal */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 48, alignItems: 'start', padding: '40px', background: 'var(--bg-soft)', borderRadius: 18, border: '1px solid var(--border)', marginBottom: 32 }}>
          <div style={{ textAlign: 'center' }}>
            <div style={{ width: 120, height: 120, borderRadius: '50%', background: 'var(--grad)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px', fontSize: 36, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em' }}>JM</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--fg)', marginBottom: 4 }}>Jonathan Martínez</div>
            <div style={{ fontSize: 12, color: '#22c55e', fontWeight: 600, fontFamily: 'JetBrains Mono, monospace' }}>Fundador & Principal Engineer</div>
            <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 4 }}>San Salvador, El Salvador</div>
          </div>
          <div>
            <p style={{ fontSize: 15, color: 'var(--fg-soft)', lineHeight: 1.7, marginBottom: 16 }}>
              Martz Forge se consolida con la convicción de aportar valor medible e innovación a través de tecnología profunda. La filosofía central establece que la ingeniería avanzada y la excelencia técnica deben estar al alcance de compañías con ambición de crecimiento.
            </p>
            <p style={{ fontSize: 15, color: 'var(--fg-soft)', lineHeight: 1.7, marginBottom: 24 }}>
              La empresa mantiene una cultura centrada en el producto y el desarrollo está directamente liderado por su fundador, garantizando de primera mano los rigurosos estándares de calidad. La estructura de la compañía está diseñada para integrar talento excepcional conforme la demanda corporativa y de nuevos productos SaaS lo exija.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Software Empresarial', 'Arquitectura SaaS', 'Automatización', 'Integraciones', 'Soluciones Cloud', 'Escalabilidad', 'Inteligencia Artificial', 'Seguridad'].map(t => (
                <span key={t} style={{ padding: '4px 12px', borderRadius: 100, background: 'rgba(34,197,94,0.08)', border: '1px solid rgba(34,197,94,0.2)', color: '#22c55e', fontSize: 12, fontWeight: 600 }}>{t}</span>
              ))}
            </div>
          </div>
        </div>

        {/* Expansión */}
        <div style={{ padding: '28px 32px', background: 'var(--bg)', borderRadius: 14, border: '1px solid var(--border)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <div style={{ display: 'flex' }}>
              <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(34,197,94,0.15)', border: '2px solid var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 700, color: '#22c55e' }}>+</div>
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg)' }}>Estructura ágil</div>
              <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>Incorporación estratégica de talento</div>
            </div>
          </div>
          <p style={{ fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.6, margin: 0 }}>
            El modelo organizativo de Martz Forge prioriza la resiliencia y la eficiencia técnica. A medida que escalan los desarrollos y el catálogo de productos SaaS, integramos a especialistas internacionales de alto nivel, asegurando la continuidad de la excelencia técnica corporativa.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ── Por qué elegirnos ────────────────────────────────────── */
const NosDiferencias = () => (
  <section className="section section-dark">
    <div className="container">
      <div className="section-head" style={{ textAlign: 'center', maxWidth: 650, margin: '0 auto 64px' }}>
        <div className="section-eyebrow" style={{ color: '#22c55e', letterSpacing: '0.15em', fontSize: 11, fontWeight: 700, textTransform: 'uppercase', marginBottom: 20 }}>
          Nuestro enfoque
        </div>
        <h2 className="section-title" style={{ color: '#fff', fontSize: 'clamp(32px, 4vw, 44px)', fontWeight: 800, letterSpacing: '-0.02em', marginBottom: 24 }}>
          Lo que nos hace <span className="dif-grad-text">diferentes</span>
        </h2>
        <p style={{ color: 'rgba(255,255,255,0.6)', fontSize: 16.5, lineHeight: 1.6, margin: 0, fontWeight: 400 }}>
          Combinamos estrategia, ingeniería y cercanía para desarrollar plataformas que generan impacto medible en la operativa de tu negocio.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
        {[
          { icon: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>, title: 'Enfoque estratégico', desc: 'Comprendemos el negocio antes de escribir una sola línea de código, para construir soluciones alineadas con objetivos reales.' },
          { icon: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>, title: 'Acompañamiento cercano', desc: 'Trabajamos como un aliado de tu equipo, con comunicación clara y seguimiento continuo durante cada etapa del proyecto.' },
          { icon: <><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></>, title: 'Ingeniería escalable', desc: 'Diseñamos soluciones robustas, seguras y preparadas para crecer junto con tu empresa.' },
          { icon: <><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>, title: 'Planificación clara', desc: 'Definimos alcances, tiempos y prioridades desde el inicio para que cada etapa avance con transparencia.' },
          { icon: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></>, title: 'Autonomía tecnológica', desc: 'Entregamos sistemas documentados para que tu organización conserve el control de su tecnología.' },
          { icon: <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></>, title: 'Visión de largo plazo', desc: 'Construimos soluciones preparadas para evolucionar conforme cambian las necesidades de tu negocio.' },
        ].map((d, i) => (
          <div key={i} 
               className="premium-dif-card"
               style={{ 
                 padding: '36px 32px', 
                 background: 'linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%)', 
                 borderRadius: 16, 
                 border: '1px solid rgba(255,255,255,0.08)',
                 display: 'flex',
                 flexDirection: 'column',
                 boxShadow: '0 4px 20px -2px rgba(0,0,0,0.4)',
                 position: 'relative',
                 overflow: 'hidden'
               }}>
            <div style={{ width: 48, height: 48, borderRadius: 12, background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28 }}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{d.icon}</svg>
            </div>
            <h4 className="dif-card-title" style={{ fontSize: 18, fontWeight: 700, color: '#fff', margin: 0, letterSpacing: '-0.01em' }}>{d.title}</h4>
            <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7, margin: 0, fontWeight: 400, maxWidth: '96%' }}>{d.desc}</p>
          </div>
        ))}
      </div>
      <style>{`
        .dif-grad-text {
          position: relative;
          background: linear-gradient(to right, #4ade80, #22c55e);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          display: inline-block;
        }
        .dif-grad-text::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: -4px;
          width: 100%;
          height: 3px;
          background: linear-gradient(to right, #4ade80, #22c55e);
          border-radius: 2px;
        }
        .dif-card-title {
          position: relative;
          padding-bottom: 14px;
          margin-bottom: 14px !important;
        }
        .dif-card-title::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 38px;
          height: 2px;
          background: rgba(34,197,94,0.7);
          border-radius: 2px;
          transition: width 0.3s ease, background 0.3s ease;
        }
        .premium-dif-card {
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .premium-dif-card::before {
          content: '';
          position: absolute;
          top: 0; left: 0; right: 0; height: 1px;
          background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
          opacity: 0.6;
          transition: all 0.25s ease;
        }
        .premium-dif-card:hover {
          transform: translateY(-4px);
          background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%) !important;
          border-color: rgba(34,197,94,0.3) !important;
          box-shadow: 0 16px 32px -10px rgba(0,0,0,0.6) !important;
        }
        .premium-dif-card:hover::before {
          background: linear-gradient(to right, transparent, rgba(34,197,94,0.5), transparent);
          opacity: 1;
        }
        .premium-dif-card:hover .dif-card-title::after {
          width: 48px;
          background: rgba(34,197,94,1);
        }
      `}</style>
    </div>
  </section>
);

/* ── App ──────────────────────────────────────────────────── */
const NosApp = () => (
  <>
    <SiteNav current="nosotros" />
    <NosHero />
    <NosStats />
    <NosHistoria />
    <NosMisionVision />
    <NosValores />
    <NosEquipo />
    <NosDiferencias />
    <BigCTA />
    <SiteFooter />
  </>
);

ReactDOM.createRoot(document.getElementById('root')).render(<NosApp />);