// DEFENSA · Gobernanza (Govern/Map/Measure/Manage) + Transferencia + Comparativa + FAQ + Plan + CTA

// GOBERNANZA · marcos tomados como referencia · sin afirmar afiliación ni certificación
const DefGovernance = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="08" label="Gobernanza y gestión de riesgos" color="#0050BD"/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000', maxWidth: 900 }}>
          Marcos tomados como referencia · sin afiliación ni certificación oficial.
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: '0 0 40px', maxWidth: 780 }}>
          Diseñamos la gobernanza tomando como referencia principios reconocidos internacionalmente para IA institucional · sin afirmar afiliación, certificación oficial ni cumplimiento formal con organismos.
        </p>
      </Reveal>

      {/* NIST AI RMF · 4 funciones */}
      <div style={{ marginBottom: 48 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD', textTransform: 'uppercase', marginBottom: 20 }}>
          Estructura de gestión de riesgo · referencia NIST AI RMF
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {[
            { n: '01', k: 'GOVERN', c: '#0050BD', d: 'Cultura, políticas, roles y responsabilidades. Governance Board · políticas de aprobación · segregación de funciones · rendición de cuentas por versión de modelo.' },
            { n: '02', k: 'MAP',    c: '#F4024C', d: 'Contexto, casos de uso, impactos previstos. Evaluación previa de impacto sobre derechos, seguridad, sostenimiento y misión institucional.' },
            { n: '03', k: 'MEASURE',c: '#B8860B', d: 'Métricas, evaluación continua, evidencia. KPIs institucionales · logs firmados · testing de drift · auditoría reproducible.' },
            { n: '04', k: 'MANAGE', c: '#0F5132', d: 'Priorización, mitigación y respuesta. Approval flows · rollback armado · gestión de excepciones · plan de continuidad.' },
          ].map((f, i) => (
            <SlideIn key={f.k} direction="up" delay={i * 80}>
              <div style={{ padding: '24px 22px', background: '#FAFBFD', border: `1.5px solid ${f.c}`, minHeight: 240, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: f.c }}>{f.n} · {f.k}</div>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55, color: '#1E1F26', margin: 0 }}>{f.d}</p>
              </div>
            </SlideIn>
          ))}
        </div>
      </div>

      {/* Principios · referencia NATO + otros marcos */}
      <div style={{ marginBottom: 40 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD', textTransform: 'uppercase', marginBottom: 20 }}>
          Principios de uso responsable · referencias internacionales
        </div>
        <div style={{ padding: 32, background: '#FAFBFD', border: '1.5px solid #1E1F26' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {[
              { i: 'scale',           k: 'Legalidad',           d: 'Cumplimiento con marco jurídico aplicable al organismo.' },
              { i: 'user-check',       k: 'Responsabilidad',     d: 'Cadena de responsabilidad institucional preservada.' },
              { i: 'file-search',      k: 'Trazabilidad',        d: 'Cada decisión con evidencia · versión · usuario · sistema.' },
              { i: 'shield-check',     k: 'Confiabilidad',       d: 'Modelos evaluados por rendimiento y robustez continua.' },
              { i: 'git-compare',      k: 'Gobernabilidad',      d: 'Approval flows · versionado · rollback disponible.' },
              { i: 'users',            k: 'Supervisión humana',  d: 'Human-in-the-loop obligatorio en decisiones de impacto.' },
              { i: 'lightbulb',         k: 'Explicabilidad',      d: 'Fundamento de cada recomendación accesible al operador.' },
              { i: 'ban',                k: 'Mitigación de sesgos', d: 'Evaluación de impacto en grupos · corrección documentada.' },
              { i: 'lock',                k: 'Seguridad',            d: 'Cifrado · segregación · acceso por roles · logs WORM.' },
            ].map((p) => (
              <div key={p.k} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <i data-lucide={p.i} width="18" height="18" style={{ color: '#0050BD', strokeWidth: 1.5, flexShrink: 0, marginTop: 2 }}/>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: '#000', marginBottom: 2 }}>{p.k}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.5 }}>{p.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ padding: '18px 22px', background: '#FBF3D9', border: '1.5px solid #B8860B', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
        <i data-lucide="alert-triangle" width="18" height="18" style={{ color: '#B8860B', strokeWidth: 1.5, flexShrink: 0, marginTop: 2 }}/>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', color: '#1E1F26', lineHeight: 1.6 }}>
          <strong>Alcance de las referencias:</strong> NIST AI RMF, principios de uso responsable de IA (incluyendo formulaciones publicadas por NATO), OECD AI Principles, ISO/IEC 42001, EU AI Act y adecuaciones nacionales de protección de datos son marcos <em>tomados como referencia</em> para el diseño de gobernanza. OMNIX no afirma afiliación, certificación, respaldo ni cumplimiento oficial con estos organismos. [VALIDAR CONFORMIDAD FORMAL POR PROYECTO]
        </div>
      </div>
    </Container>
  </section>
);

// TRANSFERENCIA · 4 fases
const DefTransfer = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="09" label="Transferencia de control" color="#0050BD"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000' }}>
            OMNIX construye la capacidad. La institución conserva el control.
          </h2>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26', marginBottom: 40 }}>
        {[
          { k: 'DIAGNÓSTICO', dur: '2-3 sem',      f: 'Mapeo de misión, datos y sistemas · con datos no sensibles.', o: 90, c: 10 },
          { k: 'PILOTO',       dur: '8-12 sem',     f: 'Una decisión · una línea base · un KPI institucional.',        o: 70, c: 30 },
          { k: 'ESCALAMIENTO',  dur: '3-6 meses',    f: 'Nuevos dominios · certificación interna · MLOps.',             o: 45, c: 55 },
          { k: 'TRANSFERENCIA', dur: 'Cuando definan', f: 'Capacidad institucional operacional · sin dependencia.',    o: 15, c: 85 },
        ].map((p, i) => (
          <Reveal key={p.k} delay={i * 100}>
            <div style={{ padding: '28px 24px', borderRight: (i < 3) ? '1px solid #E4EBF3' : 'none', minHeight: 280, display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5' }}>FASE 0{i+1}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#0050BD' }}>{p.dur}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.015em', color: '#0050BD' }}>{p.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.5 }}>{p.f}</div>
              <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid #E4EBF3' }}>
                <div style={{ display: 'flex', height: 8, background: '#F2F5F9', marginBottom: 8 }}>
                  <div style={{ width: `${p.o}%`, background: '#F4024C' }}/>
                  <div style={{ width: `${p.c}%`, background: '#0050BD' }}/>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#52557A' }}>
                  <span><span style={{ color: '#F4024C' }}>■</span> OMNIX {p.o}%</span>
                  <span><span style={{ color: '#0050BD' }}>■</span> INSTITUCIÓN {p.c}%</span>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
      <div style={{ padding: 28, background: '#FFF', border: '1.5px solid #1E1F26' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD', marginBottom: 20 }}>QUÉ SE TRANSFIERE A LA INSTITUCIÓN</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
          {['Documentación', 'Arquitectura', 'Corpus de datos', 'SDMs entrenados', 'Reglas y umbrales', 'Runbooks', 'Gobierno del modelo', 'Protocolos', 'Reentrenamiento', 'Roles y KPIs', 'Plan de continuidad', 'Capacitación'].map((it) => (
            <div key={it} style={{ padding: '10px 12px', background: '#FAFBFD', border: '1px solid #E4EBF3', display: 'flex', gap: 8, alignItems: 'center' }}>
              <i data-lucide="check" width="12" height="12" style={{ color: '#0F5132', strokeWidth: 2 }}/>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26' }}>{it}</span>
            </div>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

// COMPARATIVA CON SISTEMAS EXISTENTES
const DefVs = () => {
  const rows = [
    { tool: 'ERP institucional',      solves: 'Recursos y finanzas',              lacks: 'No razona sobre operación en tiempo real',      omnix: 'Añade cognición operacional sobre ERP existente' },
    { tool: 'CMMS',                    solves: 'Órdenes de mantenimiento',       lacks: 'No predice ni prioriza cross-dominio',           omnix: 'Predice, prioriza y coordina con otros sistemas' },
    { tool: 'Gestión documental',      solves: 'Almacenar documentos',           lacks: 'No comprende contenido ni sugiere aplicación',   omnix: 'Recuperación semántica con citas y trazabilidad' },
    { tool: 'Sistema de compras',      solves: 'Ejecutar procesos',               lacks: 'No detecta anomalías ni prioriza auditorías',   omnix: 'Detecta anomalías · prepara evidencia · no sanciona' },
    { tool: 'SIEM',                    solves: 'Detectar eventos ciber',          lacks: 'Alert fatigue · sin priorización institucional', omnix: 'Correlaciona · prioriza · sugiere contención defensiva' },
    { tool: 'BI / dashboards',         solves: 'Mostrar métricas',                lacks: 'No mueve la operación',                          omnix: 'Coordina acción · con auditoría · dentro de umbral' },
    { tool: 'RPA',                     solves: 'Automatiza tareas',               lacks: 'No decide sobre casos borde',                    omnix: 'Decide · y usa RPA como ejecutor cuando aplica' },
    { tool: 'Copiloto genérico',       solves: 'Asiste al operador',              lacks: 'Sin gobernanza · sin datos institucionales',     omnix: 'SDM propio · determinístico · dentro del perímetro' },
    { tool: 'LLM genérico',            solves: 'Responde texto',                  lacks: 'No razona bajo reglas institucionales',           omnix: 'SDMs propietarios · citables · auditables' },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="10" label="OMNIX vs sistemas existentes" color="#0050BD"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000', maxWidth: 900 }}>
            OMNIX no reemplaza · <span style={{ color: '#0050BD' }}>añade capa cognitiva</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: '0 0 56px', maxWidth: 720 }}>
            ERP, CMMS, gestión documental, sistemas de compras, SIEM y BI siguen operando. OMNIX es la capa que los coordina.
          </p>
        </Reveal>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1.4fr 1.4fr 1.6fr',
            background: '#000', color: '#FFF', padding: '18px 24px',
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
          }}>
            <div>SISTEMA</div>
            <div style={{ color: '#0F5132' }}>QUÉ RESUELVE</div>
            <div style={{ color: '#96A3B5' }}>QUÉ NO POR SÍ SOLO</div>
            <div style={{ color: '#0050BD' }}>QUÉ AGREGA OMNIX</div>
          </div>
          {rows.map((r, i) => (
            <SlideIn key={r.tool} direction="right" delay={i * 30}>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1.4fr 1.4fr 1.6fr',
                padding: '14px 24px', borderTop: '1px solid #E4EBF3',
                background: i % 2 === 0 ? '#FFF' : '#FAFBFD',
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: '#000' }}>{r.tool}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.4 }}>{r.solves}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#96A3B5', lineHeight: 1.4 }}>{r.lacks}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#0050BD', fontWeight: 500, lineHeight: 1.4 }}>{r.omnix}</div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// PLAN DE IMPLEMENTACIÓN
const DefPlan = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="11" label="Plan de implementación" color="#0050BD"/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 56px', color: '#000', maxWidth: 900 }}>
          Cuatro pasos · un dominio acotado · un KPI institucional.
        </h2>
      </Reveal>
      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', top: 32, left: '5%', right: '5%', height: 1.5, background: '#E4EBF3' }}/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, position: 'relative' }}>
          {[
            { n: '01', t: 'Identificamos una misión institucional',    d: 'Un dominio acotado · sin datos sensibles al inicio · con responsable institucional definido.', dur: '2 sem',       kpi: 'Casos priorizados' },
            { n: '02', t: 'Conectamos sistemas autorizados',            d: 'Adapters a sistemas del organismo · sin migración forzada · con clasificación de acceso.',      dur: '3-4 sem',    kpi: 'Latencia · calidad datos' },
            { n: '03', t: 'Piloto productivo con supervisión humana',    d: 'SDM entrenado sobre operación real · Runtime en N2-N3 · Governance Board activo día 1.',      dur: '8-12 sem',   kpi: 'KPI institucional · trazabilidad' },
            { n: '04', t: 'Escalamos y transferimos',                     d: 'Nuevos dominios · autonomía escalonada · certificación interna · handover contractual.',      dur: '3-6 meses',  kpi: 'Autonomía · continuidad' },
          ].map((s, i) => (
            <SlideIn key={s.n} direction="up" delay={i * 120}>
              <div style={{ padding: '0 12px' }}>
                <div style={{
                  width: 64, height: 64, background: i === 3 ? '#0050BD' : '#FFF',
                  border: '1.5px solid #1E1F26',
                  borderColor: i === 3 ? '#0050BD' : '#1E1F26',
                  borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, letterSpacing: '0.05em',
                  color: i === 3 ? '#FFF' : '#1E1F26', marginBottom: 24, position: 'relative', zIndex: 1,
                }}>{s.n}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#0050BD', textTransform: 'uppercase', marginBottom: 6 }}>{s.dur}</div>
                <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, letterSpacing: '-0.015em', color: '#000', margin: '0 0 8px', lineHeight: 1.2 }}>{s.t}</h4>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, lineHeight: 1.5, color: '#52557A', margin: '0 0 12px' }}>{s.d}</p>
                <div style={{ paddingTop: 10, borderTop: '1px solid #E4EBF3' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', marginBottom: 3 }}>KPI</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#0050BD' }}>{s.kpi}</div>
                </div>
              </div>
            </SlideIn>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

// FAQ visible · 17 preguntas críticas (los LLMs las leerán del schema + del DOM)
const DefFAQ = () => {
  const items = [
    { q: '¿Qué es OMNIX para Defensa?',                                        a: 'OMNIX para Defensa y Operaciones Críticas es una plataforma de cognición operacional soberana que ayuda a instituciones de Defensa y organismos públicos a convertir datos, activos, procesos administrativos, mantenimiento, logística y conocimiento experto en una capacidad institucional propia. Se limita a operaciones no cinéticas de apoyo · sin selección de objetivos, sistemas de armas ni uso de fuerza.' },
    { q: '¿Cómo ayuda en proyectos de datos institucionales?',                  a: 'OMNIX integra fuentes fragmentadas, construye taxonomías institucionales, relaciona activos con personas autorizadas, órdenes, inventarios y contratos, mejora calidad y procedencia, y crea trazabilidad por dato y decisión. Los datos permanecen bajo control institucional en todo momento.' },
    { q: '¿Qué es soberanía cognitiva?',                                        a: 'Soberanía cognitiva es el control institucional sobre datos, corpus, modelos, versiones, permisos, reglas, logs, infraestructura, actualizaciones, reentrenamiento y continuidad. OMNIX permite construir IAs propietarias (SDMs) desplegadas dentro del perímetro autorizado (VPC · on-premise · edge · air-gapped) con capacidad de sustituir al proveedor sin perder la capacidad construida.' },
    { q: '¿Qué es una IA local en OMNIX?',                                      a: 'Una IA local es un despliegue de OMNIX que opera dentro del perímetro autorizado de la institución · sin dependencia de servicios en la nube pública. Modalidades potenciales incluyen VPC privada, on-premise, edge, entornos aislados, operación desconectada y sincronización diferida. Cada modalidad requiere validación técnica específica por proyecto.' },
    { q: '¿Qué es un SDM para Defensa?',                                        a: 'Un SDM (Specialized Domain Model) para Defensa es un modelo propietario entrenado sobre datos institucionales, normativa, procedimientos, manuales, historial operacional, conocimiento experto, reglas de autorización y límites de autonomía de una institución específica. Es propiedad de la institución · versionado · auditable · transferible.' },
    { q: '¿Cómo ayuda a mantenimiento y preparación?',                          a: 'OMNIX conecta CMMS, historial de mantenimiento, condición de activos, manuales técnicos, personal técnico disponible y repuestos en taller para predecir condición, priorizar órdenes, sugerir sustitución de piezas obsoletas y preparar reportes de disponibilidad (readiness reporting) sin intervenir directamente sobre activos sin aprobación humana.' },
    { q: '¿Cómo ayuda a logística y sostenimiento?',                            a: 'OMNIX integra inventarios, órdenes de compra, contratos con proveedores, estado de flota logística y rutas autorizadas para priorizar reposición, evaluar alternativas ante quiebres, anticipar cadenas de suministro en riesgo y reprogramar rutas · siempre dentro del marco contractual y regulatorio del organismo.' },
    { q: '¿Cómo ayuda en presupuesto y adquisiciones?',                         a: 'OMNIX detecta anomalías en pagos, identifica duplicidades, prioriza auditorías, alerta desviaciones presupuestarias, reconcilia sistemas financieros y logísticos, y prepara expedientes para revisión. OMNIX prioriza investigación · nunca determina culpabilidad · nunca aplica sanciones automáticas · nunca adjudica contratos.' },
    { q: '¿Qué significa hiperautomatización institucional?',                    a: 'Hiperautomatización institucional es la coordinación automatizada y gobernada de datos, procesos, sistemas y equipos para ejecutar operaciones institucionales recurrentes · manteniendo supervisión humana en decisiones de alto impacto. No es sinónimo de ausencia de control · es control graduable y trazable.' },
    { q: '¿Cómo protege la información?',                                       a: 'OMNIX se despliega dentro del perímetro autorizado. Segregación por tenant, cifrado end-to-end, acceso basado en roles, mínimo privilegio, logs WORM inmutables, sin telemetría cross-cliente. Datos clasificados no salen del perímetro. Diseñado para cumplir marcos aplicables de protección de datos y seguridad institucional.' },
    { q: '¿Puede OMNIX operar en entornos aislados?',                            a: 'Sí, potencialmente. Modalidades evaluables incluyen VPC privada, on-premise, edge, air-gapped, operación desconectada con sincronización diferida y hardware específico. Cada modalidad requiere validación técnica por proyecto ([VALIDAR ARQUITECTURA] · [VALIDAR HARDWARE] · [VALIDAR OPERACIÓN OFFLINE] · [VALIDAR AIR-GAPPED]).' },
    { q: '¿Qué sistemas conecta?',                                              a: 'OMNIX se integra vía APIs y conectores autorizados a sistemas existentes del organismo: ERP institucional, CMMS, gestión documental, sistemas de compras, sistemas de proveedores, SIEM, gestión de parches, plataformas de capacitación, directorio institucional, catálogo de datos. No reemplaza estos sistemas.' },
    { q: '¿Qué decisiones puede automatizar?',                                  a: 'OMNIX puede automatizar decisiones recurrentes de bajo impacto dentro de umbrales autorizados: preparación de órdenes, reposición de repuestos, reconciliación financiera, triage de alertas defensivas, generación de expedientes, actualización entre sistemas, notificaciones, preparación de reportes. Decisiones de alto impacto requieren aprobación humana.' },
    { q: '¿Cuándo se necesita aprobación humana?',                              a: 'Aprobación humana obligatoria en: decisiones sobre derechos, adjudicaciones contractuales, aprobación de gastos sobre umbral, cambios de proveedor, sustituciones técnicas críticas, ejecución de runbooks sensibles de ciberdefensa, actualización de normativa, decisiones con impacto en misión de apoyo. Nivel N3 (Ejecución asistida) es el default en Defensa.' },
    { q: '¿Qué usos están excluidos?',                                          a: 'OMNIX está explícitamente excluido de: selección de objetivos, sistemas de armas, operaciones ofensivas, vigilancia masiva, uso de fuerza, operaciones cibernéticas ofensivas, sistemas de mando militar, perfilamiento opaco de personas, decisiones sobre derechos sin revisión humana. Sin excepciones.' },
    { q: '¿Cómo se inicia un piloto?',                                          a: 'Un piloto se inicia con una sesión institucional para acordar dominio acotado, KPI, línea base, responsable y datos disponibles. El diagnóstico inicial (2-3 semanas) puede realizarse con escenarios demostrativos y datos no sensibles. El piloto productivo hasta primer caso vivo toma 8-12 semanas.' },
    { q: '¿Cómo se transfiere la capacidad?',                                   a: 'La transferencia es contractual · no una promesa. Al cierre se entregan a la institución: documentación, arquitectura, corpus de datos, SDMs entrenados, reglas y umbrales, runbooks, gobierno del modelo, protocolos, reentrenamiento, roles y KPIs, plan de continuidad, capacitación. La institución opera sin OMNIX si así lo decide.' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="12" label="Preguntas frecuentes · comité institucional" color="#0050BD"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 56px', color: '#000', maxWidth: 900 }}>
            Diecisiete preguntas del comité institucional.
          </h2>
        </Reveal>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: (i < items.length - 1) ? '1px solid #E4EBF3' : 'none' }}>
              <button onClick={() => setOpenIdx(openIdx === i ? -1 : i)} style={{
                width: '100%', border: 'none', background: 'transparent', textAlign: 'left', cursor: 'pointer',
                padding: '18px 28px', display: 'grid', gridTemplateColumns: '52px 1fr auto', gap: 20, alignItems: 'center',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD' }}>Q · {String(i+1).padStart(2, '0')}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em', color: '#000', lineHeight: 1.3 }}>{it.q}</span>
                <span style={{ transition: 'transform 280ms', transform: openIdx === i ? 'rotate(45deg)' : 'rotate(0deg)' }}>
                  <i data-lucide="plus" width="18" height="18"></i>
                </span>
              </button>
              <div style={{ maxHeight: openIdx === i ? 360 : 0, overflow: 'hidden', transition: 'max-height 380ms cubic-bezier(0.2,0.7,0.2,1)' }}>
                <div style={{ padding: '0 28px 22px 28px', display: 'grid', gridTemplateColumns: '52px 1fr', gap: 20 }}>
                  <div/>
                  <p style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.6, color: '#1E1F26', margin: 0, maxWidth: 900 }}>{it.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

// CTA FINAL
const DefFinalCTA = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128, position: 'relative', overflow: 'hidden' }}>
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: 0.4 }} viewBox="0 0 1440 700" preserveAspectRatio="none">
      <g stroke="#0050BD" strokeWidth="1" fill="none" opacity="0.35">
        <path d="M 0 200 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 200 Q 1040 350 720 350" className="omnix-flow-dash"/>
        <path d="M 0 500 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 500 Q 1040 350 720 350" className="omnix-flow-dash"/>
      </g>
      <circle cx="720" cy="350" r="6" fill="#0050BD"/>
      <circle cx="720" cy="350" r="24" fill="none" stroke="#0050BD" strokeWidth="1" opacity="0.4"/>
    </svg>
    <Container narrow>
      <div style={{ textAlign: 'center', position: 'relative' }}>
        <Reveal>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em', color: '#0050BD', textTransform: 'uppercase', marginBottom: 24 }}>
            — Cognición institucional soberana · operaciones no cinéticas —
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 68, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#FFF' }}>
            Datos, activos y procesos bajo control institucional.
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', maxWidth: 720, margin: '0 auto 36px' }}>
            La evaluación inicial puede realizarse con escenarios demostrativos y datos no sensibles.
          </p>
        </Reveal>
        <Reveal delay={220}>
          <div style={{ display: 'inline-flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
            <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar sesión institucional</Button>
            <Button variant="ghost" dark icon="arrow-right" href="seguridad.html">Revisar Seguridad y Gobernanza</Button>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase' }}>
            NDA upfront · datos no sensibles inicialmente · integración bajo convenios institucionales · alcance no cinético
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

Object.assign(window, { DefGovernance, DefTransfer, DefVs, DefPlan, DefFAQ, DefFinalCTA });