// TRUST CENTER · Controles agrupados (12 secciones operacionales)

// SEGURIDAD DE LA INFORMACIÓN + PRIVACIDAD (dos bloques en dos columnas)
const TrustSecurity = () => (
  <section id="security" style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="02" label="Seguridad de la informació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', maxWidth: 900 }}>
          ¿Cómo protege OMNIX la información?
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: '0 0 56px', maxWidth: 780 }}>
          OMNIX estructura sus controles alrededor de la gestión de riesgos, el acceso limitado, la protección de datos, la trazabilidad, el monitoreo, la respuesta a incidentes y la mejora continua. La implementación depende del servicio, el despliegue y las responsabilidades definidas con cada cliente.
        </p>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
        {[
          { i: 'shield',        k: 'Gestión de riesgos',      d: 'Registro · evaluación · tratamiento · monitoreo continuo', state: 'IMPLEMENTED' },
          { i: 'boxes',          k: 'Inventario de activos',   d: 'Activos IT/OT · clasificación · propietarios',              state: 'IMPLEMENTED' },
          { i: 'tag',             k: 'Clasificación de info',   d: 'Taxonomía · sensibilidad · reglas de manejo',              state: 'IMPLEMENTED' },
          { i: 'key-round',        k: 'Control de acceso',       d: 'RBAC · ABAC · mínimo privilegio · segregación',            state: 'IMPLEMENTED' },
          { i: 'fingerprint',      k: 'MFA · gestión identidad', d: 'Autenticación multifactor · SSO · aprovisionamiento',      state: 'IMPLEMENTED' },
          { i: 'lock',              k: 'Gestión de secretos',     d: 'Rotación · vault · sin secretos en código',                state: 'IMPLEMENTED' },
          { i: 'lock-keyhole',      k: 'Cifrado',                  d: 'En reposo y en tránsito · gestión de llaves',              state: 'IMPLEMENTED' },
          { i: 'file-text',         k: 'Logging · auditoría',      d: 'Logs firmados · WORM · retención por política',             state: 'IMPLEMENTED' },
          { i: 'activity',           k: 'Monitoreo',                 d: 'Detección · alertas · correlación de eventos',              state: 'IMPLEMENTED' },
          { i: 'git-branch',         k: 'Gestión de cambios',        d: 'Aprobaciones · segregación · trazabilidad',                 state: 'IMPLEMENTED' },
          { i: 'settings',           k: 'Gestión configuraciones',  d: 'Baseline · deriva controlada · CMDB',                       state: 'IMPLEMENTED' },
          { i: 'search-code',        k: 'Vulnerabilidades',           d: 'Programa continuo · pentest anual · SLA por criticidad',     state: 'IMPLEMENTED' },
          { i: 'users',                k: 'Seguridad de proveedores', d: 'Due diligence · DPA · SLA · monitoreo',                     state: 'IMPLEMENTED' },
          { i: 'siren',                 k: 'Respuesta a incidentes',    d: 'Playbooks · IRT · comunicación coordinada',                  state: 'IMPLEMENTED' },
          { i: 'graduation-cap',       k: 'Capacitación',              d: 'Onboarding · continua · phishing · IA responsable',           state: 'IMPLEMENTED' },
          { i: 'refresh-cw',           k: 'Revisión periódica',        d: 'Auditoría interna · lecciones aprendidas · mejora',           state: 'IMPLEMENTED' },
          { i: 'shield-check',          k: 'Continuidad',                d: 'BCP · DR · pruebas · terceros críticos',                       state: 'IMPLEMENTED' },
          { i: 'file-search',           k: 'Auditoría',                   d: 'Interna · externa cuando aplique · registros de acceso',       state: 'IMPLEMENTED' },
        ].map((c, i) => (
          <SlideIn key={c.k} direction="up" delay={i * 30}>
            <div style={{ padding: '16px 18px', background: '#FFF', border: '1px solid #E4EBF3', display: 'flex', flexDirection: 'column', gap: 8, minHeight: 130 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <i data-lucide={c.i} width="18" height="18" style={{ color: '#0050BD', strokeWidth: 1.5 }}/>
                <TrustBadge state={c.state}/>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '-0.005em', color: '#000' }}>{c.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: '#52557A', lineHeight: 1.5 }}>{c.d}</div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// PRIVACIDAD Y CICLO DE VIDA DE DATOS
const TrustPrivacy = () => (
  <section id="privacy" style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
        <div>
          <Reveal><SectionMeta n="03" label="Privacidad y protección de datos"/></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' }}>
              Privacidad incorporada al ciclo de vida.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: '#52557A', margin: '0 0 20px' }}>
              Las obligaciones dependen de la jurisdicción, el sector, los datos procesados y el rol contractual de cada parte. OMNIX configura los controles dentro del alcance acordado · no sustituye la evaluación jurídica del cliente.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
              {['Privacidad por diseño', 'Limitación de finalidad', 'Minimización', 'Accesos por rol', 'Control por propósito', 'Retención', 'Eliminación', 'Derechos de titulares', 'Transferencias internacionales', 'Gestión de subprocesadores', 'DPIA', 'Respuesta a incidentes de privacidad'].map((c) => (
                <div key={c} style={{ padding: '8px 10px', background: '#FAFBFD', border: '1px solid #E4EBF3', display: 'flex', gap: 6, alignItems: 'center' }}>
                  <i data-lucide="check" width="12" height="12" style={{ color: '#0050BD', strokeWidth: 2 }}/>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26' }}>{c}</span>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ marginTop: 16, padding: '14px 16px', background: '#FBF3D9', border: '1.5px solid #B8860B' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 8 }}>Política de entrenamiento · [VALIDAR]</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.6 }}>
                Los datos del cliente <strong>no se utilizan para entrenar modelos públicos o compartidos sin autorización contractual explícita</strong>. La política específica se documenta en el DPA de cada proyecto.
              </div>
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ marginTop: 16 }}>
              <Button variant="ghost" icon="arrow-right" href="privacidad.html">Ver Política de Privacidad completa</Button>
            </div>
          </Reveal>
        </div>

        <div>
          <Reveal delay={80}><SectionMeta n="04" label="Ciclo de vida del dato"/></Reveal>
          <Reveal delay={140}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 20px', color: '#000' }}>
              De ingesta a eliminación · con evidencia.
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                { n: '01', k: 'Ingesta',              d: 'Fuentes autorizadas · cifrado en tránsito' },
                { n: '02', k: 'Clasificación',         d: 'Taxonomía · etiquetado · sensibilidad' },
                { n: '03', k: 'Validación',            d: 'Calidad · consentimientos · propósito' },
                { n: '04', k: 'Almacenamiento',        d: 'Cifrado en reposo · segregación por tenant' },
                { n: '05', k: 'Procesamiento',         d: 'RBAC/ABAC · propósito registrado' },
                { n: '06', k: 'Inferencia',            d: 'Contexto acotado · SDM aislado · sin data leakage' },
                { n: '07', k: 'Ejecución',              d: 'Vía sistemas autorizados · con aprobación cuando aplique' },
                { n: '08', k: 'Registro',              d: 'Logs firmados WORM · trace por decisión' },
                { n: '09', k: 'Retención',              d: 'Por contrato · obligación legal · política' },
                { n: '10', k: 'Eliminación',            d: 'Crypto-shredding · certificado de borrado' },
              ].map((r) => (
                <div key={r.n} style={{ padding: '10px 14px', background: '#FAFBFD', border: '1px solid #E4EBF3', display: 'grid', gridTemplateColumns: '30px 90px 1fr', gap: 10, alignItems: 'center' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#F4024C' }}>{r.n}</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12, color: '#000' }}>{r.k}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A', letterSpacing: '0.02em' }}>{r.d}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </Container>
  </section>
);

// GOBIERNO DE IA + SDMs + AGENTES
const TrustAI = () => (
  <section id="ai-gov" style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="05" label="Gobierno de inteligencia artificial" dark color="#F4024C"/></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: '#FFF' }}>
            <span style={{ color: '#F4024C' }}>Govern · Map · Measure · Manage</span> — el ciclo completo.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#96A3B5', margin: 0 }}>
            OMNIX toma como referencia ISO/IEC 42001, ISO/IEC 23894, NIST AI RMF y regulaciones aplicables. La referencia no implica certificación, acreditación ni cumplimiento regulatorio automático.
          </p>
        </Reveal>
      </div>

      {/* Ciclo GMMM */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 40 }}>
        {[
          { k: 'GOVERN',    c: '#0050BD', items: ['Propietarios', 'Responsabilidades', 'Políticas', 'Usos permitidos', 'Usos prohibidos', 'Riesgo aceptable'] },
          { k: 'MAP',        c: '#F4024C', items: ['Propósito', 'Usuarios', 'Datos', 'Sistemas', 'Personas afectadas', 'Dependencias', 'Impacto'] },
          { k: 'MEASURE',    c: '#B8860B', items: ['Desempeño', 'Robustez', 'Seguridad', 'Explicabilidad', 'Sesgos', 'Drift', 'Latencia', 'Calidad de datos'] },
          { k: 'MANAGE',     c: '#0F5132', items: ['Controles', 'Aprobaciones', 'Monitoreo', 'Excepciones', 'Reentrenamiento', 'Rollback', 'Suspensión', 'Retiro'] },
        ].map((r, i) => (
          <SlideIn key={r.k} direction="up" delay={i * 90}>
            <div style={{ padding: '24px 22px', background: '#0A0B10', border: `1.5px solid ${r.c}`, minHeight: 320 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em', color: r.c, marginBottom: 16 }}>{r.k}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                {r.items.map((it) => (
                  <li key={it} style={{ display: 'flex', gap: 6, fontFamily: 'var(--font-body)', fontSize: 13, color: '#FFF' }}>
                    <i data-lucide="chevron-right" width="12" height="12" style={{ color: r.c, strokeWidth: 1.5, flexShrink: 0, marginTop: 3 }}/>
                    {it}
                  </li>
                ))}
              </ul>
            </div>
          </SlideIn>
        ))}
      </div>

      {/* SDMs */}
      <div id="sdms" style={{ padding: '32px 32px', background: '#0A0B10', border: '1.5px solid #2E3140', marginBottom: 24 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 12 }}>SEGURIDAD DE SDMs</div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, letterSpacing: '-0.02em', color: '#FFF', margin: '0 0 20px' }}>Cada inteligencia especializada tiene propietario, límites y evidencia.</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
          {['Propósito', 'Propietario', 'Corpus', 'Fuentes', 'Categorías de datos', 'Datos restringidos', 'Versión', 'Reglas', 'Uso autorizado', 'Uso prohibido', 'Sistemas disponibles', 'Nivel de autonomía', 'Evaluaciones', 'Aprobaciones', 'Monitoreo', 'Drift', 'Reentrenamiento', 'Rollback', 'Retiro', 'Trazabilidad de fuentes'].map((it) => (
            <div key={it} style={{ padding: '8px 12px', background: '#000', border: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#FFF', letterSpacing: '0.04em' }}>
              <i data-lucide="check" width="10" height="10" style={{ color: '#F4024C', strokeWidth: 2, marginRight: 4, verticalAlign: 'middle' }}/>{it}
            </div>
          ))}
        </div>
        <div style={{ marginTop: 16, padding: '12px 14px', background: 'rgba(184,134,11,0.15)', border: '1px solid #B8860B', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#FFF', letterSpacing: '0.06em', lineHeight: 1.55 }}>
          <strong style={{ color: '#B8860B' }}>Lenguaje aprobado:</strong> "razonamiento auditable" · "fuentes y versiones trazables" · "evaluaciones proporcionales al riesgo" · "supervisión humana configurable" · "gestión de excepciones y rollback". <strong style={{ color: '#EA384C' }}>Prohibido:</strong> "cero alucinaciones" · "modelo infalible" · "razonamiento siempre correcto" · "autonomía sin riesgo".
        </div>
      </div>

      {/* Agentes · Niveles de autonomía */}
      <div id="agents" style={{ padding: '32px 32px', background: '#0A0B10', border: '1.5px solid #2E3140' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 12 }}>AGENTES · AUTONOMÍA CONTROLADA</div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, letterSpacing: '-0.02em', color: '#FFF', margin: '0 0 20px' }}>Autonomía dentro de límites verificables.</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
          {[
            { n: 'N1', t: 'OBSERVACIÓN',                 d: 'Conecta y clasifica información' },
            { n: 'N2', t: 'PREDICCIÓN',                   d: 'Anticipa condiciones o anomalías' },
            { n: 'N3', t: 'RECOMENDACIÓN',                d: 'Propone alternativas · con fundamento' },
            { n: 'N4', t: 'EJECUCIÓN ASISTIDA',            d: 'Prepara acciones · espera aprobación' },
            { n: 'N5', t: 'EJECUCIÓN CONTROLADA',          d: 'Workflows recurrentes · dentro de umbrales' },
          ].map((l) => (
            <div key={l.n} style={{ padding: '16px 14px', background: '#000', border: '1.5px solid #F4024C', minHeight: 140 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.14em', color: '#F4024C', fontWeight: 600 }}>{l.n}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: '#FFF', letterSpacing: '-0.005em', marginTop: 8 }}>{l.t}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', marginTop: 6, lineHeight: 1.5 }}>{l.d}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
          {['Propósito limitado', 'Identidad de agente', 'Permisos autorizados', 'Datos autorizados', 'Herramientas autorizadas', 'Límites por caso', 'Responsable asignado', 'Tiempo de vida', 'Logs firmados', 'Condiciones de detención', 'Escalamiento', 'Rollback · kill switch'].map((it) => (
            <div key={it} style={{ padding: '6px 10px', background: '#000', border: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#FFF', letterSpacing: '0.04em' }}>
              <i data-lucide="check" width="10" height="10" style={{ color: '#F4024C', strokeWidth: 2, marginRight: 4, verticalAlign: 'middle' }}/>{it}
            </div>
          ))}
        </div>
        <div style={{ marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em' }}>
          [VALIDAR NIVEL DE AUTONOMÍA] · [VALIDAR CONTROL] · [VALIDAR ROLLBACK] · No todos los niveles están disponibles para todos los proyectos.
        </div>
      </div>
    </Container>
  </section>
);

// MODELOS DE DESPLIEGUE + IDENTIDAD
const TrustDeployment = () => (
  <section id="deployment" style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="06" label="Modelos de despliegue"/></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' }}>
            ¿Dónde puede operar OMNIX?
          </h2>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 40 }}>
        {[
          { i: 'cloud',       k: 'VPC PRIVADA',       d: 'En cloud del cliente o autorizado · datos en su tenant',       cases: 'Cognitive Ops en cloud propio', state: 'IMPLEMENTED' },
          { i: 'server',       k: 'CLOUD DEDICADO',    d: 'Infraestructura dedicada en cloud del proveedor',              cases: 'Empresas sin cloud propio',       state: 'IMPLEMENTED' },
          { i: 'building-2',   k: 'ON-PREMISE',        d: 'En datacenter del cliente · sin salida a internet obligatoria', cases: 'Banca · Defensa · Energía · Gob', state: 'IMPLEMENTED' },
          { i: 'git-merge',    k: 'HÍBRIDO',            d: 'Combinación cloud + on-premise según diseño',                    cases: 'Multi-región · legacy IT/OT',    state: 'IMPLEMENTED' },
          { i: 'cpu',            k: 'EDGE',                d: 'Procesamiento cercano a la operación',                          cases: 'Minería · manufactura remota',    state: 'IN_PROGRESS' },
          { i: 'shield-off',    k: 'AIR-GAPPED',          d: 'Entornos totalmente aislados · sin conectividad externa',        cases: 'Defensa · infraestructura crítica', state: 'IN_PROGRESS' },
          { i: 'globe',           k: 'REGIONAL',            d: 'Residencia por jurisdicción configurable',                      cases: 'LatAm · EU · US · APAC',           state: 'IMPLEMENTED' },
          { i: 'clock',           k: 'SYNC DIFERIDA',        d: 'Sincronización controlada · batch autorizado',                   cases: 'Redes limitadas · OT',              state: 'IN_PROGRESS' },
        ].map((m, i) => (
          <SlideIn key={m.k} direction="up" delay={i * 60}>
            <div style={{ padding: '24px 22px', background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 220, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <i data-lucide={m.i} width="24" height="24" style={{ color: '#0050BD', strokeWidth: 1.5 }}/>
                <TrustBadge state={m.state}/>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C' }}>{m.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.5 }}>{m.d}</div>
              <div style={{ marginTop: 'auto', paddingTop: 10, borderTop: '1px solid #E4EBF3', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#52557A' }}>
                <span style={{ color: '#96A3B5' }}>CASOS · </span>{m.cases}
              </div>
            </div>
          </SlideIn>
        ))}
      </div>
      <div style={{ padding: '16px 20px', background: '#FBF3D9', border: '1px solid #B8860B', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26', letterSpacing: '0.06em', lineHeight: 1.6 }}>
        <strong>[VALIDAR DISPONIBILIDAD]</strong> · [VALIDAR PROVEEDOR] · [VALIDAR REGIÓN] · [VALIDAR HARDWARE] · [VALIDAR AIR-GAPPED] · [VALIDAR SOPORTE]. No todas las modalidades están disponibles como oferta estándar. Cada proyecto valida arquitectura, residencia, continuidad y soporte según requerimientos específicos.
      </div>

      {/* Identidad y acceso */}
      <div id="identity" style={{ marginTop: 64 }}>
        <Reveal><SectionMeta n="07" label="Identidad y control de acceso"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 24px', color: '#000' }}>
            Mínimo privilegio · segregación · trazabilidad.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
          {['SSO · SAML/OIDC', 'MFA obligatorio', 'RBAC · ABAC', 'Mínimo privilegio', 'Segregación de funciones', 'Cuentas privilegiadas · PAM', 'Aprovisionamiento', 'Desaprovisionamiento', 'Revisión periódica de acceso', 'Sesiones · timeout', 'Logs de acceso', 'Acceso temporal · JIT', 'Cuentas de servicio', 'Identidad de agentes', 'Rotación de secretos', 'Vault · gestión de secretos'].map((c) => (
            <div key={c} 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: '#0050BD', strokeWidth: 2 }}/>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#1E1F26', letterSpacing: '0.02em' }}>{c}</span>
            </div>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

// DESARROLLO SEGURO + VULNS + INCIDENTES + CONTINUIDAD
const TrustOps = () => (
  <section id="sdlc" 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, marginBottom: 40 }}>
        {/* SDLC */}
        <div>
          <Reveal><SectionMeta n="08" label="Desarrollo seguro"/></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' }}>
              Seguridad integrada al ciclo de desarrollo.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
              {['Revisión de código', 'Protección de ramas', 'Gestión de cambios', 'Separación de ambientes', 'Gestión de dependencias', 'SAST', 'DAST', 'Escaneo de secretos', 'SBOM', 'Firma de artefactos', 'Control CI/CD', 'Pruebas automatizadas', 'Aprobación producción', 'Rollback gestionado'].map((c) => (
                <div key={c} style={{ padding: '8px 10px', background: '#FFF', border: '1px solid #E4EBF3', display: 'flex', gap: 6, alignItems: 'center' }}>
                  <i data-lucide="check" width="12" height="12" style={{ color: '#0F5132', strokeWidth: 2 }}/>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26' }}>{c}</span>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em', lineHeight: 1.6 }}>
              Referencia: NIST SSDF · OWASP ASVS. Herramientas específicas no se publican por seguridad operacional.
            </div>
          </Reveal>
        </div>

        {/* Vulnerabilidades */}
        <div id="vulns">
          <Reveal><SectionMeta n="09" label="Gestión de vulnerabilidades"/></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' }}>
              Programa continuo · SLA por criticidad.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                { n: '01', t: 'Identificar',   d: 'Escaneo continuo · fuentes internas y externas' },
                { n: '02', t: 'Validar',        d: 'Verificar reproducibilidad e impacto' },
                { n: '03', t: 'Clasificar',     d: 'CVSS · contexto operacional · riesgo real' },
                { n: '04', t: 'Priorizar',      d: 'Por criticidad · exposición · explotabilidad' },
                { n: '05', t: 'Remediar',       d: 'Parche · configuración · mitigación temporal' },
                { n: '06', t: 'Verificar',       d: 'Re-testing · confirmación de cierre' },
                { n: '07', t: 'Documentar',     d: 'Trace por hallazgo · lecciones aprendidas' },
                { n: '08', t: 'Comunicar',       d: 'Cuando aplique · según contrato y regulación' },
              ].map((r) => (
                <div key={r.n} style={{ padding: '8px 12px', background: '#FFF', border: '1px solid #E4EBF3', display: 'grid', gridTemplateColumns: '30px 90px 1fr', gap: 10, alignItems: 'center' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#F4024C' }}>{r.n}</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12, color: '#000' }}>{r.t}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#52557A' }}>{r.d}</span>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em' }}>
              [VALIDAR SLA] · [VALIDAR PROGRAMA] · [VALIDAR PENTEST]. No se publican vulnerabilidades abiertas ni sistemas afectados.
            </div>
          </Reveal>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
        {/* Incidentes */}
        <div id="incidents">
          <Reveal><SectionMeta n="10" label="Respuesta a incidentes"/></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' }}>
              Preparados para detectar, contener y aprender.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
              {[
                { n: '01', t: 'Detección' }, { n: '02', t: 'Clasificación' }, { n: '03', t: 'Contención' }, { n: '04', t: 'Investigación' },
                { n: '05', t: 'Preservación evidencia' }, { n: '06', t: 'Erradicación' }, { n: '07', t: 'Recuperación' }, { n: '08', t: 'Comunicación' },
                { n: '09', t: 'Revisión posterior' }, { n: '10', t: 'Mejora' },
              ].map((r) => (
                <div key={r.n} style={{ padding: '10px 12px', background: '#FFF', border: '1px solid #E4EBF3', display: 'flex', gap: 8, alignItems: 'center' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#EA384C' }}>{r.n}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#000' }}>{r.t}</span>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em', lineHeight: 1.6 }}>
              Plazos, canales y responsabilidades se definen contractualmente y conforme a la normativa aplicable. Playbooks detallados no se publican.
            </div>
          </Reveal>
        </div>

        {/* Continuidad */}
        <div id="continuity">
          <Reveal><SectionMeta n="11" label="Continuidad y recuperació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' }}>
              BCP · DR · pruebas periódicas.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
              {['Business Impact Analysis', 'Dependencias críticas', 'Planes de continuidad', 'Backups cifrados', 'Restauración probada', 'Redundancia', 'Recuperación (DR)', 'Pruebas periódicas', 'Gestión de crisis', 'Comunicación coordinada', 'Terceros críticos', 'Operación degradada', 'Retorno a normal'].map((c) => (
                <div key={c} style={{ padding: '8px 10px', background: '#FFF', border: '1px solid #E4EBF3', display: 'flex', gap: 6, alignItems: 'center' }}>
                  <i data-lucide="check" width="12" height="12" style={{ color: '#0F5132', strokeWidth: 2 }}/>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#1E1F26' }}>{c}</span>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em', lineHeight: 1.6 }}>
              <strong>RTO · RPO · SLA se definen contractualmente por servicio y despliegue.</strong> Referencia: ISO 22301. [RTO CONTRACTUAL] · [RPO CONTRACTUAL] · [VALIDAR PRUEBAS] · [VALIDAR ARQUITECTURA]
            </div>
          </Reveal>
        </div>
      </div>
    </Container>
  </section>
);

Object.assign(window, { TrustSecurity, TrustPrivacy, TrustAI, TrustDeployment, TrustOps });