// TRUST CENTER · Terceros + Certificaciones + Responsabilidad Compartida + Transferencia + Docs + Formulario + Vuln Disclosure + FAQ + CTA

// TERCEROS Y SUBPROCESADORES
const TrustThirdParties = () => (
  <section id="third-parties" style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="12" label="Terceros y subprocesadores"/></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' }}>
            Confianza extendida a toda la cadena.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: '#52557A', margin: 0 }}>
            OMNIX gestiona proveedores y subprocesadores con due diligence, requisitos contractuales, monitoreo y planes de salida. La lista completa se comparte bajo NDA con clientes en evaluación.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 32 }}>
        <div style={{ padding: '24px 26px', background: '#FAFBFD', border: '1.5px solid #0050BD' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD', marginBottom: 14 }}>PROGRAMA DE GESTIÓN DE TERCEROS</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {['Due diligence documentada', 'Evaluación de riesgo por vendor', 'Requisitos contractuales · DPA', 'Seguridad · privacidad · continuidad', 'Acceso mínimo · principio need-to-know', 'Notificación de cambios de subprocesadores', 'Monitoreo continuo', 'Plan de salida documentado'].map((c) => (
              <li key={c} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26' }}>
                <i data-lucide="check" width="14" height="14" style={{ color: '#0050BD', strokeWidth: 2, flexShrink: 0, marginTop: 3 }}/>{c}
              </li>
            ))}
          </ul>
        </div>
        <div style={{ padding: '24px 26px', background: '#FAFBFD', border: '1.5px solid #F4024C' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 14 }}>REGISTRO DE SUBPROCESADORES</div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.6, margin: '0 0 14px' }}>
            La lista actualizada incluye nombre, función, tipo de datos, país/región, propósito, salvaguardas y fecha de incorporación · disponible bajo NDA a clientes en evaluación.
          </p>
          <div style={{ marginBottom: 14, display: 'flex', flexDirection: 'column', gap: 4 }}>
            {['Categoría · infraestructura cloud', 'Categoría · observabilidad', 'Categoría · seguridad · WAF · DDoS', 'Categoría · comunicaciones transaccionales'].map((c) => (
              <div key={c} style={{ padding: '6px 10px', background: '#FFF', border: '1px solid #E4EBF3', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A', letterSpacing: '0.04em' }}>
                {c}
              </div>
            ))}
          </div>
          <Button variant="ghost" icon="arrow-right" href="#request">Consultar subprocesadores autorizados</Button>
          <div style={{ marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em' }}>
            [VALIDAR SUBPROCESADOR] · Sólo categorías públicas · proveedores específicos bajo NDA
          </div>
        </div>
      </div>
    </Container>
  </section>
);

// CERTIFICACIONES Y AUDITORÍAS · registro público verificable
const TrustCertifications = () => {
  const items = [
    { name: 'ISO/IEC 27001:2022',       type: 'Certificación',        state: 'IN_PROGRESS',   scope: 'ISMS · sistema de gestión de seguridad',      version: '2022', body: '[VALIDAR ORGANISMO]', date: 'Q3 2026 target',   valid: '3 años · post-certificación', access: 'L1', evid: 'Programa aprobado · roadmap firmado',       next: 'Auditoría inicial Q3 2026' },
    { name: 'ISO/IEC 27701:2019',       type: 'Certificación',        state: 'IN_PROGRESS',   scope: 'PIMS · sistema de gestión de privacidad',      version: '2019', body: '[VALIDAR ORGANISMO]', date: 'Q4 2026 target',   valid: '3 años · post-certificación', access: 'L1', evid: 'Extiende ISO 27001',                        next: 'Auditoría Q4 2026' },
    { name: 'ISO/IEC 42001:2023',       type: 'Referencia · programa', state: 'REFERENCE',    scope: 'AIMS · sistema de gestión de IA',              version: '2023', body: 'Autoevaluación',       date: 'Jul 2026',            valid: 'Continuo',                    access: 'L1', evid: 'Diseño alineado · sin certificación afirmada', next: 'Revisión Q1 2027' },
    { name: 'SOC 2 Type II',            type: 'Informe atestación',   state: 'PLANNED',       scope: 'Trust Services Criteria · Security',            version: '—',    body: '[VALIDAR AUDITOR]',      date: '2027 target',         valid: '12 meses del periodo',       access: 'L2', evid: 'Preparación en curso',                       next: 'Kickoff 2027' },
    { name: 'ISO 22301:2019',           type: 'Referencia',            state: 'REFERENCE',    scope: 'BCMS · continuidad del negocio',                 version: '2019', body: 'Autoevaluación',       date: 'Jun 2026',            valid: 'Continuo',                    access: 'L2', evid: 'BCP · DR · pruebas · terceros críticos',    next: 'Revisión Q4 2026' },
    { name: 'NIST CSF 2.0',             type: 'Marco de referencia',    state: 'REFERENCE',    scope: 'Ciberseguridad · funciones core',                version: '2.0',  body: 'Autoevaluación',       date: 'Jul 2026',            valid: 'Continuo',                    access: 'L1', evid: 'Mapeado a controles internos',              next: 'Revisión anual' },
    { name: 'NIST AI RMF 1.0',          type: 'Marco de referencia',    state: 'REFERENCE',    scope: 'Gestión de riesgo de IA · Govern·Map·Measure·Manage', version: '1.0', body: 'Autoevaluación',       date: 'Jul 2026',            valid: 'Continuo',                    access: 'L1', evid: 'Programa de gobierno IA alineado',           next: 'Revisión semestral' },
    { name: 'GDPR · UE 2016/679',        type: 'Marco jurídico · por caso', state: 'REFERENCE', scope: 'Sujeto a alcance territorial y material',        version: '2016',  body: 'Por proyecto',           date: 'Por proyecto',        valid: 'Por proyecto',                access: 'L1', evid: 'DPA · TIA · SCCs según caso',                next: 'Por proyecto' },
    { name: 'LGPD · Brasil 13.709',      type: 'Marco jurídico · por caso', state: 'REFERENCE', scope: 'Sujeto a alcance en Brasil',                     version: '2018', body: 'Por proyecto',           date: 'Por proyecto',        valid: 'Por proyecto',                access: 'L1', evid: 'DPA · ANPD compliance según caso',            next: 'Por proyecto' },
    { name: 'Pentest independiente',    type: 'Evaluación técnica',     state: 'ASSESSED',      scope: 'Aplicación · API · infra cloud',                version: 'Anual', body: '[VALIDAR AUDITOR]',      date: 'Última: Q1 2026',      valid: '12 meses',                     access: 'L2', evid: 'Resumen ejecutivo bajo NDA · findings resueltos', next: 'Q1 2027' },
    { name: 'Auditoría interna',        type: 'Auditoría interna',      state: 'IMPLEMENTED',   scope: 'Programa continuo',                              version: 'Semestral', body: 'Auditoría interna OMNIX', date: 'Última: Jun 2026',    valid: 'Continuo',                    access: 'L2', evid: 'Reportes internos · plan de acción',         next: 'Dic 2026' },
    { name: 'DPIA · Evaluación de impacto', type: 'Por caso',            state: 'IMPLEMENTED',   scope: 'Casos que involucran datos personales',         version: 'Por proyecto', body: 'DPO OMNIX',           date: 'Por proyecto',        valid: 'Por proyecto',                access: 'L2', evid: 'Realizada según GDPR Art. 35 cuando aplique', next: 'Por proyecto' },
  ];
  return (
    <section id="certifications" 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="13" label="Certificaciones, atestaciones y auditorías"/></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' }}>
              Registro público · <span style={{ color: '#F4024C' }}>estado real</span> de cada marco.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
              Los estándares y marcos mostrados pueden corresponder a certificaciones, atestaciones, evaluaciones o referencias de diseño. El estado y alcance se identifican expresamente para evitar interpretaciones incorrectas. Sin logos no autorizados.
            </p>
          </Reveal>
        </div>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1.2fr 1fr 0.9fr 1fr auto', background: '#000', color: '#FFF', padding: '14px 20px', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            <div>MARCO · NORMA</div>
            <div>TIPO</div>
            <div>ALCANCE</div>
            <div>ORGANISMO</div>
            <div>FECHA</div>
            <div>PRÓXIMA REV</div>
            <div>ESTADO</div>
          </div>
          {items.map((r, i) => (
            <div key={r.name} style={{
              display: 'grid', gridTemplateColumns: '1.4fr 1fr 1.2fr 1fr 0.9fr 1fr auto', gap: 12, alignItems: 'center',
              padding: '14px 20px',
              borderTop: '1px solid #E4EBF3',
              background: i % 2 === 0 ? '#FFF' : '#FAFBFD',
            }}>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: '#000' }}>{r.name}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: '#96A3B5', letterSpacing: '0.06em', marginTop: 2 }}>v{r.version} · {r.evid}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: '#0050BD' }}>{r.type}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: '#1E1F26', lineHeight: 1.4 }}>{r.scope}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A', letterSpacing: '0.02em' }}>{r.body}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A' }}>{r.date}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A' }}>{r.next}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
                <TrustBadge state={r.state}/>
                <TrustAccessBadge level={r.access}/>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 20, padding: '16px 20px', background: '#FBF3D9', border: '1px solid #B8860B', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26', letterSpacing: '0.06em', lineHeight: 1.65 }}>
          <strong>Diferencias importantes:</strong> "certificación" (organismo autorizado emite certificado vigente) ≠ "atestación" (auditor emite informe SOC/similar) ≠ "evaluación" (tercero realiza test específico) ≠ "referencia" (marco tomado como diseño sin certificar). OMNIX nunca afirma cumplimiento universal ni utiliza el término "compliant" como sinónimo de referencia. [VALIDAR CERTIFICACIÓN · ATESTACIÓN · ALCANCE · FECHA · VERSIÓN]
        </div>
      </Container>
    </section>
  );
};

// RESPONSABILIDAD COMPARTIDA (matriz)
const TrustShared = () => {
  const [mode, setMode] = React.useState(0);
  const modes = ['SaaS · cloud administrado', 'VPC privada', 'On-premise', 'Entorno aislado'];
  // O = OMNIX, C = Cliente, I = Infra provider, R = Compartido
  const matrix = [
    // dominio,               SaaS,        VPC,          On-prem,       Air-gap
    ['Identidad de usuarios',  'C',         'C',          'C',           'C'],
    ['Datos del cliente',       'C',         'C',          'C',           'C'],
    ['Configuración app',       'R',         'R',          'R',           'R'],
    ['Modelos y SDMs',           'R',         'R',          'R',           'R'],
    ['Corpus de entrenamiento', 'C',         'C',          'C',           'C'],
    ['Integraciones',            'R',         'R',          'C',           'C'],
    ['Workflows',                 'R',         'R',          'C',           'C'],
    ['Dispositivos usuarios',    'C',         'C',          'C',           'C'],
    ['Backups app',                'O',         'O',          'C',           'C'],
    ['Monitoreo app',              'O',         'O',          'R',           'R'],
    ['Incidentes app',              'O',         'O',          'R',           'R'],
    ['Retención de datos',          'R',         'C',          'C',           'C'],
    ['Eliminación de datos',        'R',         'C',          'C',           'C'],
    ['Cumplimiento regulatorio',   'C',         'C',          'C',           'C'],
    ['Continuidad de infraestructura', 'I',      'I',          'C',           'C'],
  ];
  const legend = {
    'O': { l: 'OMNIX',      c: '#F4024C' },
    'C': { l: 'CLIENTE',    c: '#0050BD' },
    'I': { l: 'INFRA · CLOUD', c: '#B8860B' },
    'R': { l: 'COMPARTIDO', c: '#0F5132' },
  };
  return (
    <section id="shared" style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <div style={{ maxWidth: 900, marginBottom: 56 }}>
          <Reveal><SectionMeta n="14" label="Responsabilidad compartida"/></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' }}>
              La seguridad depende de <span style={{ color: '#F4024C' }}>responsabilidades claras</span>.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              La matriz de responsabilidades varía según el modelo de despliegue. Cada proyecto formaliza la asignación en su contrato y anexos técnicos.
            </p>
          </Reveal>
        </div>

        {/* Selector de modelo */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, marginBottom: 24, border: '1.5px solid #1E1F26' }}>
          {modes.map((m, i) => (
            <button key={m} onClick={() => setMode(i)} style={{
              padding: '14px 12px', border: 'none', cursor: 'pointer',
              background: mode === i ? '#000' : '#FFF',
              color: mode === i ? '#F4024C' : '#1E1F26',
              borderRight: (i < 3) ? '1px solid #E4EBF3' : 'none',
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500,
              transition: 'all 220ms',
            }}>MODELO 0{i+1} · {m}</button>
          ))}
        </div>

        {/* Matriz */}
        <div key={mode} style={{ border: '1.5px solid #1E1F26', background: '#FFF', animation: 'omnix-slide-in 320ms cubic-bezier(0.2,0.7,0.2,1)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', background: '#000', color: '#FFF', padding: '14px 24px', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            <div>DOMINIO</div>
            <div style={{ textAlign: 'right' }}>RESPONSABLE · {modes[mode]}</div>
          </div>
          {matrix.map((row, i) => {
            const val = row[mode + 1];
            const info = legend[val];
            return (
              <div key={row[0]} style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', padding: '12px 24px', borderTop: '1px solid #E4EBF3', background: i % 2 === 0 ? '#FFF' : '#FAFBFD', alignItems: 'center' }}>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#000' }}>{row[0]}</div>
                <div style={{ textAlign: 'right' }}>
                  <span style={{ display: 'inline-block', padding: '4px 12px', border: `1.5px solid ${info.c}`, color: info.c, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', fontWeight: 500 }}>{info.l}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Leyenda */}
        <div style={{ marginTop: 20, padding: '14px 20px', background: '#FAFBFD', border: '1px solid #E4EBF3', display: 'flex', gap: 20, flexWrap: 'wrap' }}>
          {Object.entries(legend).map(([k, v]) => (
            <div key={k} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <span style={{ width: 12, height: 12, background: v.c }}/>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#1E1F26', letterSpacing: '0.06em' }}>{v.l}</span>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

// TRANSFERENCIA DE CONTROL
const TrustTransfer = () => (
  <section id="transfer" 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="15" label="Transferencia de control"/></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' }}>
            La confianza también significa <span style={{ color: '#F4024C' }}>poder asumir el control</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: 0, maxWidth: 780 }}>
            OMNIX construye y opera la capacidad mientras el equipo del cliente desarrolla el conocimiento, los controles y las responsabilidades necesarios para asumirla progresivamente. La institución debe poder operar sin OMNIX cuando lo decida.
          </p>
        </Reveal>
      </div>
      <div style={{ padding: 32, background: '#FFF', border: '1.5px solid #1E1F26' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>QUÉ SE TRANSFIERE PROGRESIVAMENTE</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
          {['Documentación', 'Arquitectura', 'Runbooks', 'Gobierno', 'SDMs', 'Corpus acordado', 'Reglas', 'Evaluaciones', 'Monitoreo', 'Workflows', 'Gestión de excepciones', 'Reentrenamiento', 'Operación', '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 style={{ marginTop: 20, padding: '14px 16px', background: '#FBF3D9', border: '1px solid #B8860B', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26', letterSpacing: '0.06em', lineHeight: 1.6 }}>
          [VALIDAR ALCANCE CONTRACTUAL] · [VALIDAR PROPIEDAD] · [VALIDAR LICENCIAS] · [VALIDAR PLAN DE SALIDA]. La propiedad de datos, corpus y modelos se define en el contrato de cada proyecto.
        </div>
        <div style={{ marginTop: 16 }}>
          <Button variant="ghost" icon="arrow-right" href="transferencia.html">Conocer el modelo de transferencia completo</Button>
        </div>
      </div>
    </Container>
  </section>
);

// CATÁLOGO DE DOCUMENTOS
const TrustDocs = () => {
  const [filter, setFilter] = React.useState('all');
  const filters = [
    { k: 'all',       l: 'Todos' },
    { k: 'security',  l: 'Seguridad' },
    { k: 'privacy',   l: 'Privacidad' },
    { k: 'ai',         l: 'IA · SDMs' },
    { k: 'continuity', l: 'Continuidad' },
    { k: 'architecture', l: 'Arquitectura' },
    { k: 'legal',      l: 'Legal' },
    { k: 'third',      l: 'Terceros' },
    { k: 'audit',      l: 'Auditoría' },
  ];
  const docs = [
    { name: 'Resumen de seguridad',                      cat: 'security',     access: 'L1', state: 'IMPLEMENTED',   ver: '2026.07', owner: 'CISO' },
    { name: 'Política de Privacidad',                      cat: 'privacy',      access: 'L1', state: 'PENDING',        ver: '—',        owner: 'DPO' },
    { name: 'Política de Cookies',                         cat: 'privacy',      access: 'L1', state: 'PENDING',        ver: '—',        owner: 'DPO' },
    { name: 'DPA · Data Processing Agreement',           cat: 'legal',        access: 'L2', state: 'IMPLEMENTED',   ver: '2026.06', owner: 'Legal' },
    { name: 'Anexo de seguridad',                         cat: 'security',     access: 'L2', state: 'IMPLEMENTED',   ver: '2026.06', owner: 'CISO' },
    { name: 'Certificado ISO 27001',                       cat: 'security',     access: 'L1', state: 'PLANNED',        ver: 'Q3 2026', owner: 'CISO' },
    { name: 'Informe SOC 2 Type II',                       cat: 'audit',        access: 'L2', state: 'PLANNED',        ver: '2027',    owner: 'CISO' },
    { name: 'Lista de subprocesadores',                    cat: 'third',        access: 'L2', state: 'IMPLEMENTED',   ver: '2026.07', owner: 'Legal · IT' },
    { name: 'Resumen ejecutivo de pentest',                cat: 'security',     access: 'L2', state: 'IMPLEMENTED',   ver: '2026.Q1', owner: 'SecOps' },
    { name: 'Cuestionario de seguridad (CAIQ)',            cat: 'security',     access: 'L2', state: 'IMPLEMENTED',   ver: '2026.07', owner: 'CISO' },
    { name: 'Modelo de responsabilidad compartida',         cat: 'security',     access: 'L1', state: 'IMPLEMENTED',   ver: '2026.07', owner: 'CISO' },
    { name: 'Resumen de gobierno de IA',                    cat: 'ai',           access: 'L1', state: 'IMPLEMENTED',   ver: '2026.07', owner: 'AI Gov' },
    { name: 'Modelo de autonomía · N1-N5',                  cat: 'ai',           access: 'L1', state: 'IMPLEMENTED',   ver: '2026.07', owner: 'AI Gov' },
    { name: 'Resumen de continuidad · BCP · DR',            cat: 'continuity',   access: 'L2', state: 'IMPLEMENTED',   ver: '2026.06', owner: 'Ops' },
    { name: 'Resumen de respuesta a incidentes',             cat: 'security',     access: 'L2', state: 'IMPLEMENTED',   ver: '2026.06', owner: 'IRT' },
    { name: 'Política de divulgación responsable',           cat: 'security',     access: 'L1', state: 'IN_PROGRESS',   ver: '—',        owner: 'CISO' },
    { name: 'Arquitectura conceptual OMNIX',                  cat: 'architecture', access: 'L2', state: 'IMPLEMENTED',   ver: '2026.07', owner: 'CTO' },
    { name: 'Plan de salida · exit strategy',                  cat: 'legal',        access: 'L2', state: 'IMPLEMENTED',   ver: '2026.07', owner: 'Legal · CTO' },
    { name: 'Matriz de retención de datos',                   cat: 'privacy',      access: 'L2', state: 'IMPLEMENTED',   ver: '2026.07', owner: 'DPO' },
    { name: 'Whitepaper de SDMs',                              cat: 'ai',           access: 'L1', state: 'IMPLEMENTED',   ver: '2026.07', owner: 'AI Gov' },
    { name: 'Whitepaper de razonamiento auditable',            cat: 'ai',           access: 'L2', state: 'IN_PROGRESS',   ver: '—',        owner: 'AI Gov' },
  ];
  const filtered = filter === 'all' ? docs : docs.filter(d => d.cat === filter);
  return (
    <section id="docs" style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <div style={{ maxWidth: 900, marginBottom: 40 }}>
          <Reveal><SectionMeta n="16" label="Catálogo de documentación"/></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' }}>
              Documentación para procesos de evaluación.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              La disponibilidad depende de la etapa comercial, el alcance del proyecto y los acuerdos de confidencialidad. Documentos con estado PENDIENTE o IN_PROGRESS se activan según roadmap.
            </p>
          </Reveal>
        </div>

        {/* Filtros */}
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 24 }}>
          {filters.map((f) => (
            <button key={f.k} onClick={() => setFilter(f.k)} style={{
              padding: '8px 14px', border: '1px solid',
              borderColor: filter === f.k ? '#F4024C' : '#E4EBF3',
              background: filter === f.k ? '#F4024C' : '#FFF',
              color: filter === f.k ? '#FFF' : '#1E1F26',
              fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500,
              cursor: 'pointer', transition: 'all 220ms',
            }}>{f.l}</button>
          ))}
        </div>

        {/* Tabla de docs */}
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 0.9fr auto auto', background: '#000', color: '#FFF', padding: '14px 20px', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            <div>DOCUMENTO</div>
            <div>PROPIETARIO</div>
            <div>VERSIÓN</div>
            <div>ACCESO</div>
            <div>ESTADO</div>
            <div style={{ width: 100, textAlign: 'right' }}>ACCIÓN</div>
          </div>
          {filtered.map((d, i) => (
            <div key={d.name} style={{
              display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 0.9fr auto auto', gap: 12, alignItems: 'center',
              padding: '12px 20px',
              borderTop: '1px solid #E4EBF3',
              background: i % 2 === 0 ? '#FFF' : '#FAFBFD',
            }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13, color: '#000' }}>{d.name}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A' }}>{d.owner}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A' }}>{d.ver}</div>
              <div><TrustAccessBadge level={d.access}/></div>
              <div><TrustBadge state={d.state}/></div>
              <div style={{ width: 100, textAlign: 'right' }}>
                {(d.state === 'IMPLEMENTED') ? (
                  <a href="#request" style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C', textDecoration: 'none', textTransform: 'uppercase' }}>Solicitar →</a>
                ) : (
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase' }}>—</span>
                )}
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

// FORMULARIO DE SOLICITUD + DIVULGACIÓN RESPONSABLE
const TrustRequest = () => {
  const [sent, setSent] = React.useState(false);
  return (
    <section id="request" style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
          {/* Formulario de solicitud */}
          <div>
            <Reveal><SectionMeta n="17" label="Solicitud de documentación"/></Reveal>
            <Reveal delay={80}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 20px', color: '#000' }}>
                Proceso de acceso controlado.
              </h2>
            </Reveal>
            <Reveal delay={140}>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: '#52557A', margin: '0 0 20px' }}>
                Cada solicitud se valida individualmente para proteger información confidencial. No solicitamos credenciales, secretos ni datos de producción.
              </p>
            </Reveal>
            <Reveal delay={200}>
              {!sent ? (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ padding: 24, background: '#FFF', border: '1.5px solid #1E1F26', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {[
                    { l: 'Nombre',                 t: 'text',   req: true },
                    { l: 'Empresa',                 t: 'text',   req: true },
                    { l: 'Cargo',                    t: 'text',   req: true },
                    { l: 'Correo corporativo',       t: 'email',  req: true },
                    { l: 'País',                      t: 'text',   req: true },
                    { l: 'Industria',                  t: 'text',   req: false },
                  ].map((f) => (
                    <label key={f.l} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#52557A', textTransform: 'uppercase' }}>{f.l}{f.req && <span style={{ color: '#F4024C' }}> *</span>}</span>
                      <input type={f.t} required={f.req} style={{ padding: '10px 12px', border: '1px solid #E4EBF3', background: '#FAFBFD', fontFamily: 'var(--font-body)', fontSize: 13, color: '#000' }}/>
                    </label>
                  ))}
                  <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#52557A', textTransform: 'uppercase' }}>Documento requerido <span style={{ color: '#F4024C' }}>*</span></span>
                    <select required style={{ padding: '10px 12px', border: '1px solid #E4EBF3', background: '#FAFBFD', fontFamily: 'var(--font-body)', fontSize: 13, color: '#000' }}>
                      <option>Selecciona un documento…</option>
                      <option>Resumen de seguridad</option>
                      <option>DPA · Data Processing Agreement</option>
                      <option>Anexo de seguridad</option>
                      <option>Lista de subprocesadores</option>
                      <option>Resumen ejecutivo de pentest</option>
                      <option>Cuestionario CAIQ</option>
                      <option>Resumen de continuidad</option>
                      <option>Whitepaper de SDMs</option>
                      <option>Modelo de autonomía N1-N5</option>
                      <option>Otro (indicar en comentarios)</option>
                    </select>
                  </label>
                  <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#52557A', textTransform: 'uppercase' }}>Etapa de evaluación</span>
                    <select style={{ padding: '10px 12px', border: '1px solid #E4EBF3', background: '#FAFBFD', fontFamily: 'var(--font-body)', fontSize: 13, color: '#000' }}>
                      <option>Discovery inicial</option>
                      <option>Evaluación técnica</option>
                      <option>Due diligence</option>
                      <option>Preparación de piloto</option>
                      <option>Contratación</option>
                      <option>Cliente existente</option>
                    </select>
                  </label>
                  <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#52557A', textTransform: 'uppercase' }}>Motivo · comentarios</span>
                    <textarea rows="3" placeholder="Contexto sin credenciales, secretos ni arquitectura sensible en texto libre" style={{ padding: '10px 12px', border: '1px solid #E4EBF3', background: '#FAFBFD', fontFamily: 'var(--font-body)', fontSize: 13, color: '#000', resize: 'vertical' }}/>
                  </label>
                  <label style={{ display: 'flex', gap: 8, alignItems: 'flex-start', marginTop: 4 }}>
                    <input type="checkbox" required style={{ marginTop: 4 }}/>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A', letterSpacing: '0.02em', lineHeight: 1.5 }}>Confirmo que solicito la documentación con propósito legítimo y que acepto tratarla bajo las condiciones de confidencialidad aplicables. NDA vigente si corresponde.</span>
                  </label>
                  <button type="submit" style={{ marginTop: 8, padding: '12px 20px', background: '#F4024C', color: '#FFF', border: 'none', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, cursor: 'pointer' }}>Enviar solicitud →</button>
                </form>
              ) : (
                <div style={{ padding: 32, background: '#0F5132', color: '#FFF', border: '1.5px solid #0F5132' }}>
                  <i data-lucide="check-circle" width="32" height="32" style={{ strokeWidth: 1.5, marginBottom: 12 }}/>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.015em', margin: '0 0 8px' }}>Solicitud recibida</h3>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.6, opacity: 0.9, margin: 0 }}>
                    Un miembro del equipo de Seguridad validará su solicitud y coordinará el acceso apropiado. Tiempo de respuesta estimado: 24-48h hábiles.
                  </p>
                </div>
              )}
            </Reveal>
            <Reveal delay={260}>
              <div style={{ marginTop: 14, padding: '12px 14px', background: '#FBF3D9', border: '1px solid #B8860B', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26', letterSpacing: '0.06em', lineHeight: 1.6 }}>
                <strong>Workflow:</strong> validar identidad → confirmar relación → revisar NDA → validar autorización → compartir acceso temporal → registrar descarga → revocar acceso → conservar evidencia.
              </div>
            </Reveal>
          </div>

          {/* Divulgación responsable */}
          <div id="disclosure">
            <Reveal delay={100}><SectionMeta n="18" label="Divulgación responsable"/></Reveal>
            <Reveal delay={160}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 20px', color: '#000' }}>
                Reporte responsable de vulnerabilidades.
              </h2>
            </Reveal>
            <Reveal delay={220}>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: '#52557A', margin: '0 0 20px' }}>
                Investigadores de seguridad pueden reportar posibles vulnerabilidades a nuestro equipo. Actuamos con investigadores que operen de buena fe.
              </p>
            </Reveal>
            <Reveal delay={280}>
              <div style={{ padding: 24, background: '#FFF', border: '1.5px solid #EA384C' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#EA384C', textTransform: 'uppercase', marginBottom: 14 }}>CANAL DE CONTACTO</div>
                <div style={{ padding: '12px 16px', background: '#0A0B10', color: '#F4024C', fontFamily: 'var(--font-mono)', fontSize: 14, letterSpacing: '0.06em', marginBottom: 16 }}>
                  security@omnixcorp.com <span style={{ color: '#96A3B5', fontSize: 10, marginLeft: 8 }}>[VALIDAR]</span>
                </div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#52557A', textTransform: 'uppercase', marginBottom: 10 }}>Alcance autorizado</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 16px', display: 'flex', flexDirection: 'column', gap: 5 }}>
                  {[
                    'Aplicación web pública OMNIX',
                    'APIs públicas documentadas',
                    'Infraestructura DNS · certificados',
                    'Configuración de superficie pública',
                  ].map((c) => (
                    <li key={c} style={{ display: 'flex', gap: 6, fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26' }}>
                      <i data-lucide="check" width="12" height="12" style={{ color: '#0F5132', strokeWidth: 2, flexShrink: 0, marginTop: 3 }}/>{c}
                    </li>
                  ))}
                </ul>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#EA384C', textTransform: 'uppercase', marginBottom: 10 }}>Fuera de alcance</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 5 }}>
                  {[
                    'Sistemas de clientes · datos de clientes',
                    'Ataques DDoS · social engineering',
                    'Acceso físico o intrusión no autorizada',
                    'Extorsión · amenazas · interrupción',
                  ].map((c) => (
                    <li key={c} style={{ display: 'flex', gap: 6, fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26' }}>
                      <i data-lucide="x" width="12" height="12" style={{ color: '#EA384C', strokeWidth: 2, flexShrink: 0, marginTop: 3 }}/>{c}
                    </li>
                  ))}
                </ul>
                <div style={{ marginTop: 16, padding: '10px 12px', background: '#FBF3D9', border: '1px solid #B8860B', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26', letterSpacing: '0.06em', lineHeight: 1.6 }}>
                  <strong>Sin programa de recompensas publicado.</strong> Reconocimiento en Hall of Fame para reportes válidos que sigan la política. [VALIDAR PROGRAMA · VALIDAR SAFE HARBOR · REVISIÓN LEGAL]
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </Container>
    </section>
  );
};

// FAQ · 12 preguntas
const TrustFAQ = () => {
  const items = [
    { q: '¿Qué es el Trust Center de OMNIX?', a: 'El Trust Center centraliza información sobre seguridad, privacidad, gobierno de inteligencia artificial, resiliencia, auditorías y gestión de terceros. Permite a clientes y evaluadores comprender los controles de OMNIX, verificar el estado de cada evidencia con su alcance y vigencia, y solicitar documentación técnica o contractual mediante un proceso de acceso controlado. No sustituye contratos, DPA ni auditorías del cliente.' },
    { q: '¿OMNIX está certificada bajo ISO/IEC 27001?', a: 'El estado de cada certificación se muestra individualmente con alcance, vigencia y evidencia disponible. Cuando OMNIX toma una norma como referencia sin estar certificada, se identifica expresamente como "referencia" o "en implementación". No afirmamos certificación sin certificado formal, vigente y emitido por organismo autorizado. Consulte el registro público de certificaciones para el estado actualizado.' },
    { q: '¿OMNIX cuenta con un informe SOC 2?', a: 'SOC 2 no es una certificación · es un informe de atestación emitido por un auditor. El estado actual se muestra en el registro público con el tipo de informe (Type I o Type II), periodo, auditor y disponibilidad. Cuando el informe esté disponible, se comparte bajo NDA con clientes en evaluación. El estado se actualiza según el roadmap firmado.' },
    { q: '¿Qué marcos de seguridad toma OMNIX como referencia?', a: 'Como diseño y referencia: ISO/IEC 27001 (ISMS), ISO/IEC 27701 (PIMS), ISO/IEC 42001 (AIMS), ISO 22301 (BCMS), NIST CSF 2.0, NIST AI RMF 1.0. Por caso: GDPR, LGPD, leyes locales de privacidad, marcos sectoriales aplicables. Referencia no implica certificación · cada marco muestra su estado real en el registro público.' },
    { q: '¿Cómo protege OMNIX los datos de los clientes?', a: 'Datos, corpus y modelos permanecen dentro del perímetro autorizado (VPC, on-premise, aislado). Controles: cifrado en tránsito y reposo, gestión de llaves, RBAC/ABAC, mínimo privilegio, segregación por tenant, logs firmados WORM, seudonimización, retención por política y contrato. La eliminación se documenta con certificado de borrado al finalizar el propósito o el contrato.' },
    { q: '¿Utiliza OMNIX datos del cliente para entrenar modelos compartidos?', a: 'Los datos del cliente no se utilizan para entrenar modelos públicos o compartidos sin autorización contractual explícita. Los SDMs se entrenan sobre el corpus autorizado del cliente, permanecen dentro de su perímetro y su propiedad se define en el contrato de cada proyecto. La política específica se documenta en el DPA correspondiente.' },
    { q: '¿Dónde pueden desplegarse los modelos?', a: 'Ocho modalidades soportadas: VPC privada en cloud del cliente, cloud dedicado, on-premise en datacenter propio, híbrido, edge, air-gapped (en implementación), regional por jurisdicción, sincronización diferida (en implementación). Cada modalidad muestra estado real, casos recomendados y responsabilidades. La residencia se configura por jurisdicción, sector y regulación aplicable.' },
    { q: '¿Cómo se gobiernan los SDMs y agentes?', a: 'Cada SDM y agente documenta: propósito, propietario, corpus, fuentes, categorías de datos, versión, reglas, usos autorizados y prohibidos, sistemas disponibles, nivel de autonomía (N1-N5), evaluaciones, aprobaciones, monitoreo, drift, reentrenamiento, rollback y retiro. Ciclo Govern-Map-Measure-Manage según ISO 42001 y NIST AI RMF como referencia.' },
    { q: '¿Cómo mantiene OMNIX supervisión humana?', a: 'Con niveles de autonomía configurables N1 (observación) a N5 (ejecución controlada). Cada nivel define límites, aprobaciones, rollback y kill switch. Los casos de alto impacto mantienen aprobación humana obligatoria (definida por industria y jurisdicción). Sin modo permisivo no autorizado · sin excepciones automáticas · con logs firmados por cada decisión.' },
    { q: '¿Cómo gestiona OMNIX incidentes y vulnerabilidades?', a: 'Vulnerabilidades: programa continuo (identificar, validar, clasificar, priorizar, remediar, verificar, documentar, comunicar) con pentest anual y SLA por criticidad. Incidentes: proceso de 10 pasos con detección, contención, investigación, preservación de evidencia, comunicación coordinada, revisión posterior. Plazos específicos se definen contractualmente. No publicamos vulnerabilidades abiertas ni playbooks.' },
    { q: '¿Qué subprocesadores utiliza OMNIX?', a: 'La lista actualizada de subprocesadores (nombre, función, tipo de datos, país/región, propósito, salvaguardas, fecha de incorporación) está disponible bajo NDA a clientes en evaluación. Publicamos las categorías generales (infraestructura cloud, observabilidad, seguridad WAF/DDoS, comunicaciones transaccionales) sin identificar proveedores específicos por razones de seguridad operacional.' },
    { q: '¿Cómo puede solicitarse documentación de seguridad?', a: 'Mediante el formulario controlado en la sección "Solicitud de documentación". El workflow incluye validación de identidad, confirmación de relación comercial, revisión de NDA, autorización, acceso temporal, registro de descarga y revocación. La disponibilidad depende de la etapa comercial, el documento solicitado y los acuerdos de confidencialidad. Tiempo estimado de respuesta: 24-48h hábiles.' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section id="faq" style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <div style={{ maxWidth: 900, marginBottom: 56 }}>
          <Reveal><SectionMeta n="19" label="Preguntas frecuentes · Trust Center"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
              Doce preguntas · doce respuestas verificables.
            </h2>
          </Reveal>
        </div>
        <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)} aria-expanded={openIdx === 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: '#F4024C' }}>Q · {String(i+1).padStart(2, '0')}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, letterSpacing: '-0.01em', color: '#000', lineHeight: 1.3 }}>{it.q}</span>
                <span aria-hidden="true" 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 ? 380 : 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.65, color: '#1E1F26', margin: 0, maxWidth: 900 }}>{it.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

// CTA FINAL
const TrustCTA = () => (
  <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" aria-hidden="true">
      <g stroke="#F4024C" 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="#F4024C"/>
      <circle cx="720" cy="350" r="24" fill="none" stroke="#F4024C" 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: '#F4024C', textTransform: 'uppercase', marginBottom: 24 }}>
            — Obtenga la evidencia que su evaluación necesita —
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 62, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#FFF' }}>
            La confianza no se declara. Se demuestra.
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', maxWidth: 780, margin: '0 auto 36px' }}>
            El equipo de OMNIX puede proporcionar documentación de seguridad, privacidad, arquitectura, continuidad y gobierno de IA según el alcance de la evaluación, la etapa comercial y los acuerdos de confidencialidad aplicables.
          </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="#request">Solicitar documentación de confianza</Button>
            <Button variant="ghost" dark icon="arrow-right" href="#disclosure">Reportar posible vulnerabilidad</Button>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: '1px solid #2E3140', display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
            {[
              { l: 'Seguridad y Gobernanza',      h: 'seguridad.html' },
              { l: 'Privacidad',                    h: 'privacidad.html' },
              { l: 'Cómo protege los SDMs',         h: 'ias-propietarias.html' },
              { l: 'Modelo de transferencia',        h: 'transferencia.html' },
              { l: 'Contactar Seguridad',            h: 'diagnostico.html' },
            ].map((l) => (
              <a key={l.l} href={l.h} style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#96A3B5', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>{l.l} <i data-lucide="arrow-up-right" width="12" height="12"/></a>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

Object.assign(window, { TrustThirdParties, TrustCertifications, TrustShared, TrustTransfer, TrustDocs, TrustRequest, TrustFAQ, TrustCTA });