// BANCA · Autonomía · Gobierno IA · Seguridad · Transferencia · Comparativa · KPIs · Plan · FAQ · CTA · Objeciones

// AUTONOMÍA + CONTROL HUMANO
const BancaAutonomy = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="06" label="Autonomía y control humano" dark color="#F4024C"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 46, lineHeight: 1.05, letterSpacing: '-0.025em', color: '#FFF', margin: '0 0 20px' }}>
              La autonomía nunca es binaria en banca.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#96A3B5', margin: '0 0 32px' }}>
              Cinco niveles graduables · configurables por caso, cliente, monto, jurisdicción y política. Las decisiones de alto impacto mantienen aprobación humana obligatoria.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ padding: '18px 22px', background: '#0A0B10', border: '1.5px solid #EA384C' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#EA384C', textTransform: 'uppercase', marginBottom: 10 }}>APROBACIÓN HUMANA OBLIGATORIA</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                {[
                  'Denegación de crédito de alto impacto',
                  'Terminación de relaciones bancarias',
                  'Congelamiento de activos',
                  'Reportes regulatorios (SAR/STR)',
                  'Bloqueos definitivos de cuenta',
                  'Decisiones con impacto legal',
                  'Excepciones regulatorias',
                  'Casos con baja confianza del modelo',
                  'Cambios de política y umbrales',
                ].map((u) => (
                  <li key={u} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-body)', fontSize: 13, color: '#FFF' }}>
                    <i data-lucide="x" width="14" height="14" style={{ color: '#EA384C', strokeWidth: 2, flexShrink: 0, marginTop: 3 }}/>
                    {u}
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10' }}>
            {[
              { n: 'N1', t: 'Observación',                   r: 'Conecta y clasifica señales' },
              { n: 'N2', t: 'Predicción',                     r: 'Anticipa riesgo, anomalía o deterioro' },
              { n: 'N3', t: 'Recomendación',                  r: 'Propone alternativas con fundamento' },
              { n: 'N4', t: 'Ejecución asistida',              r: 'Prepara la acción · espera aprobación' },
              { n: 'N5', t: 'Ejecución controlada',            r: 'Recurrentes dentro de umbrales aprobados' },
            ].map((l, i, arr) => (
              <div key={l.n} style={{
                display: 'grid', gridTemplateColumns: '48px 1fr 180px', gap: 16, alignItems: 'center',
                padding: '18px 20px',
                borderBottom: (i < arr.length - 1) ? '1px solid #2E3140' : 'none',
                background: i === 2 ? 'rgba(244,2,76,0.10)' : 'transparent',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.14em', color: i === 2 ? '#F4024C' : '#96A3B5', fontWeight: 600 }}>{l.n}</span>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: '#FFF' }}>{l.t}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', marginTop: 4 }}>{l.r}</div>
                </div>
                {i === 2 && <Badge tone="fuxia">BANCA DEFAULT</Badge>}
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// GOBIERNO DE IA · Govern · Map · Measure · Manage
const BancaGovernance = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="07" label="Gobierno de IA y modelos"/></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 }}>
          Model Risk Management · Govern · Map · Measure · Manage.
        </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ño de gobierno alineado con marcos internacionales de Model Risk y AI Governance · sin afirmar afiliación ni certificación oficial. Sujeto a validación jurídica por jurisdicción.
        </p>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 40 }}>
        {[
          { n: '01', k: 'GOVERN', c: '#0050BD', items: ['Roles', 'Responsabilidades', 'Políticas', 'Riesgo aceptable', 'Usos autorizados', 'Usos prohibidos'] },
          { n: '02', k: 'MAP',    c: '#F4024C', items: ['Caso de uso', 'Clientes afectados', 'Datos', 'Sistemas', 'Regulación', 'Dependencias', 'Impacto'] },
          { n: '03', k: 'MEASURE',c: '#B8860B', items: ['Precisión · Recall', 'Falsos positivos/negativos', 'Drift', 'Equidad', 'Explicabilidad', 'Robustez', 'Latencia'] },
          { n: '04', k: 'MANAGE', c: '#0F5132', items: ['Límites · controles', 'Monitoreo', 'Aprobaciones', 'Rollback', 'Reentrenamiento', 'Retiro', 'Incidentes'] },
        ].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: 280, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: f.c }}>{f.n} · {f.k}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 5 }}>
                {f.items.map((it) => (
                  <li key={it} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#000' }}>
                    <span style={{ color: f.c }}>·</span>{it}
                  </li>
                ))}
              </ul>
            </div>
          </SlideIn>
        ))}
      </div>
      <div style={{ padding: '18px 22px', background: '#FBF3D9', border: '1.5px solid #B8860B' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', color: '#1E1F26', lineHeight: 1.6 }}>
          <strong>Marcos tomados como referencia:</strong> regulación bancaria local · supervisión prudencial · AML/CFT · protección de datos · protección del consumidor · Model Risk Management · resiliencia operacional · riesgo de terceros · EU AI Act cuando aplique · DORA cuando aplique. Sujeto a validación jurídica por jurisdicción. [VALIDAR CUMPLIMIENTO · CERTIFICACIÓN · JURISDICCIÓN]
        </div>
      </div>
    </Container>
  </section>
);

// SEGURIDAD · PRIVACIDAD · SOBERANÍA
const BancaSecurity = () => (
  <section 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: 80, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="08" label="Seguridad · privacidad · soberanía"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 46, lineHeight: 1.05, letterSpacing: '-0.025em', color: '#000', margin: '0 0 24px' }}>
              Datos, modelos y decisiones · dentro del perímetro del banco.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: '0 0 32px' }}>
              OMNIX se despliega dentro del perímetro autorizado del banco. Residencia de datos, cifrado, tokenización, acceso por roles, mínimo privilegio, segregación de funciones y logs auditables por diseño.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <Button variant="ghost" icon="arrow-right" href="seguridad.html">Revisar Seguridad y Gobernanza</Button>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
            <div style={{ padding: '14px 20px', borderBottom: '1px solid #E4EBF3', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase' }}>
              Controles por diseño
            </div>
            {[
              { i: 'shield', t: 'Despliegue VPC / on-prem / air-gapped',  d: 'Modalidad seleccionada por proyecto · [VALIDAR ARQUITECTURA]' },
              { i: 'lock',    t: 'Cifrado + tokenización + seudonimización', d: 'Datos en tránsito, reposo y uso · gestión de llaves' },
              { i: 'users',   t: 'Acceso por roles · mínimo privilegio',    d: 'Segregación de funciones · control por propósito' },
              { i: 'file-search', t: 'Logs de auditoría · WORM inmutables', d: 'Cada señal, decisión y acción con evidencia' },
              { i: 'globe',   t: 'Residencia de datos por jurisdicción',    d: 'Configurable · [VALIDAR JURISDICCIÓN]' },
              { i: 'refresh-cw', t: 'Versionado · retención · eliminación',  d: 'Ciclo de vida controlado · borrado seguro' },
              { i: 'link',     t: 'Gestión de terceros · vendor risk',       d: 'Evaluación · monitoreo · continuidad de terceros críticos' },
              { i: 'alert-triangle', t: 'Certificaciones',                    d: 'ISO 27001 · SOC 2 · sectoriales · [VALIDAR CERTIFICACIÓN]' },
            ].map((c, i, arr) => (
              <div key={c.t} style={{
                padding: '14px 20px', display: 'grid', gridTemplateColumns: '28px 1fr', gap: 14,
                borderBottom: (i < arr.length - 1) ? '1px solid #E4EBF3' : 'none',
              }}>
                <i data-lucide={c.i} width="18" height="18" style={{ color: '#F4024C', strokeWidth: 1.5 }}/>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: '#000', marginBottom: 4, letterSpacing: '-0.005em' }}>{c.t}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.5 }}>{c.d}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// TRANSFERENCIA · 5 fases banca
const BancaTransfer = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="09" 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 inteligencia del banco <span style={{ color: '#F4024C' }}>permanece en el banco</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: 0, maxWidth: 720 }}>
            OMNIX construye y opera la capacidad mientras el banco desarrolla el conocimiento, el gobierno y los controles necesarios para asumirla progresivamente. [VALIDAR ALCANCE CONTRACTUAL]
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26', marginBottom: 40 }}>
        {[
          { k: 'DIAGNÓSTICO',   dur: '2-3 sem',  f: 'Decisión · línea base · fuentes · riesgo · KPI',    o: 95, c: 5 },
          { k: 'PROTOTIPO',      dur: '4-6 sem',  f: 'Datos sintéticos · modelo inicial · HITL',           o: 80, c: 20 },
          { k: 'PILOTO PROD.',   dur: '8-12 sem', f: 'Integración autorizada · monitoreo · rollback',       o: 60, c: 40 },
          { k: 'ESCALAMIENTO',   dur: '3-6 mes',  f: 'Nuevas señales · productos · canales · países',      o: 40, c: 60 },
          { k: 'TRANSFERENCIA',  dur: 'Cuando decida', f: 'Documentación · capacitación · continuidad',    o: 15, c: 85 },
        ].map((p, i) => (
          <Reveal key={p.k} delay={i * 100}>
            <div style={{ padding: '24px 20px', borderRight: (i < 4) ? '1px solid #E4EBF3' : 'none', minHeight: 260, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <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: '#F4024C' }}>{p.dur}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.015em', color: '#F4024C' }}>{p.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.4 }}>{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.08em', color: '#52557A' }}>
                  <span><span style={{ color: '#F4024C' }}>■</span> {p.o}%</span>
                  <span>{p.c}% <span style={{ color: '#0050BD' }}>■</span></span>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
      <div style={{ padding: 28, background: '#FAFBFD', border: '1.5px solid #1E1F26' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>QUÉ SE TRANSFIERE AL BANCO</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
          {['Documentación', 'Arquitectura', 'SDMs', 'Corpus acordado', 'Políticas', 'Reglas', 'Runbooks', 'Workflows', 'Matrices de aprobación', 'Gobierno', 'Monitoreo', 'Evaluación', 'Gestión de excepciones', 'Reentrenamiento', 'Continuidad'].map((it) => (
            <div key={it} style={{ padding: '10px 12px', background: '#FFF', 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>
);

// OMNIX vs SISTEMAS BANCARIOS
const BancaVs = () => {
  const rows = [
    { tool: 'Core bancario',       solves: 'Registro y transaccionalidad',        lacks: 'No correlaciona señales ni decide',            omnix: 'Añade capa cognitiva sobre core existente' },
    { tool: 'Motor antifraude',    solves: 'Detección de señales de fraude',     lacks: 'No conecta con identidad, comportamiento, política', omnix: 'Correlaciona señales · prioriza · orquesta respuesta' },
    { tool: 'Plataforma AML',      solves: 'Monitoreo · alertas',                lacks: 'No contextualiza ni prepara investigación',       omnix: 'Consolida antecedentes · prepara expedientes' },
    { tool: 'KYC',                  solves: 'Verificación documental',            lacks: 'No razona sobre inconsistencias complejas',       omnix: 'Detecta inconsistencias · prioriza revisión' },
    { tool: 'Credit scoring',       solves: 'Estimación de riesgo',               lacks: 'No coordina excepciones · sin trazabilidad completa', omnix: 'Coordina antecedentes, explicaciones y aprobaciones' },
    { tool: 'BPM',                  solves: 'Ejecuta flujos definidos',           lacks: 'No decide qué flujo activar por contexto',        omnix: 'Decide qué flujo activar según el contexto' },
    { tool: 'RPA',                  solves: 'Automatiza tareas repetitivas',      lacks: 'No decide sobre casos borde',                     omnix: 'Automatiza decisiones · usa RPA como ejecutor' },
    { tool: 'Case management',      solves: 'Gestión de casos',                   lacks: 'No prioriza ni enriquece con contexto',           omnix: 'Enriquece caso con contexto · prioriza · escala' },
    { tool: 'SIEM · SOAR',          solves: 'Detección · orquestación ciber',    lacks: 'Sin visión de servicio bancario · dependencias',  omnix: 'Correlaciona ciber con impacto en servicio bancario' },
    { tool: 'BI · dashboards',      solves: 'Muestra métricas',                   lacks: 'No mueve la operación',                            omnix: 'Coordina acción · con auditoría · dentro de umbral' },
    { tool: 'Copiloto genérico',    solves: 'Asiste al analista',                lacks: 'Sin gobernanza bancaria · datos institucionales', omnix: 'SDM propio · determinístico · dentro del perímetro' },
    { tool: 'LLM genérico',         solves: 'Responde texto',                    lacks: 'No razona bajo políticas bancarias',              omnix: 'SDMs bancarios · citables · auditables · MRM' },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="10" label="OMNIX vs sistemas bancarios"/></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: '#F4024C' }}>conecta, contextualiza y orquesta</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 }}>
            Core, motor antifraude, plataforma AML, KYC, credit scoring, BPM y case management siguen operando. OMNIX es la capa cognitiva 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: '#F4024C' }}>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: '#F4024C', fontWeight: 500, lineHeight: 1.4 }}>{r.omnix}</div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// FAQ visible · 10 preguntas
const BancaFAQ = () => {
  const items = [
    { q: '¿OMNIX reemplaza el motor antifraude?', a: 'No. OMNIX no reemplaza motor antifraude, core bancario, plataforma AML, KYC ni credit scoring. Es una capa cognitiva que se integra vía APIs y eventos autorizados para correlacionar señales entre estos sistemas, contextualizarlas con identidad, comportamiento y política, y coordinar respuestas proporcionales al riesgo · con evidencia trazable.' },
    { q: '¿Puede bloquear transacciones automáticamente?', a: 'Sí, dentro de umbrales explícitamente aprobados por el banco y sujeto a nivel de autonomía configurado. Retenciones temporales, requerimientos de autenticación reforzada y escalamiento a analista son acciones recurrentes que pueden automatizarse. Bloqueos definitivos de cuenta y decisiones con impacto legal mantienen aprobación humana obligatoria.' },
    { q: '¿Cómo reduce la fricción para clientes legítimos?', a: 'Aplicando respuestas proporcionales al riesgo. Un cliente con contexto conocido y señales coherentes atraviesa sin fricción adicional. Un cliente con múltiples señales atípicas recibe autenticación reforzada. Sólo casos con alto riesgo residual escalan a revisión. El objetivo no es bloquear más · es actuar con proporcionalidad documentada.' },
    { q: '¿OMNIX puede presentar reportes regulatorios (SAR/STR)?', a: 'No. OMNIX prepara borradores de expedientes con evidencia consolidada, señala información faltante y facilita la investigación · pero la presentación del reporte regulatorio permanece bajo responsabilidad del oficial de cumplimiento del banco. La determinación de lavado o financiamiento ilícito nunca es automática.' },
    { q: '¿Puede tomar decisiones de crédito?', a: 'Puede apoyar preparando antecedentes, verificando consistencia, priorizando revisión y monitoreando drift. Para decisiones que afecten acceso a crédito mantiene supervisión humana obligatoria, explicabilidad de factores, controles de equidad, mecanismos de apelación y monitoreo bajo Model Risk Management. [VALIDAR JURISDICCIÓN · FAIRNESS · MODEL RISK]' },
    { q: '¿Cómo se controlan los sesgos?', a: 'Con evaluación de fairness sobre grupos protegidos, monitoreo de drift por segmento, testing con casos sintéticos, revisión periódica por el Governance Board mixto banco-OMNIX, y transparencia sobre variables usadas. Sin variables prohibidas por regulación. Con mecanismos de apelación cuando la decisión afecta acceso a servicios financieros.' },
    { q: '¿Dónde se ejecutan los modelos?', a: 'Dentro del perímetro autorizado del banco. Modalidades soportadas: VPC privada en cloud del banco, on-premise en datacenter del banco, o entornos aislados cuando aplique. Los datos, corpus y modelos nunca salen del perímetro. Sin telemetría cross-tenant. La residencia de datos se configura por jurisdicción.' },
    { q: '¿Cómo se audita cada decisión?', a: 'Con logs firmados WORM inmutables que registran: señales usadas, fuentes, modelo, versión, reglas aplicadas, recomendación, nivel de confianza, responsable, aprobación, acción ejecutada, resultado y excepciones. Cada decisión es reproducible bajo el mismo contexto. Los logs se retienen según jurisdicción y política del banco.' },
    { q: '¿Qué ocurre si el modelo no reconoce el caso?', a: 'Se escala a revisión humana automáticamente cuando la confianza cae bajo umbral. El caso no se procesa a ciegas. El analista recibe el contexto consolidado y la evidencia disponible. Estos casos alimentan el ciclo de reentrenamiento gobernado. Sin excepciones ni "modo permisivo" no autorizado.' },
    { q: '¿Cómo se inicia un piloto sin exponer datos sensibles?', a: 'La Fase 2 (Prototipo Controlado) usa datos sintéticos o anonimizados. Se define caso, línea base, KPI y políticas. Sólo cuando el prototipo demuestra fitness y el banco autoriza formalmente, se pasa a Piloto Productivo (Fase 3) con integración a datos reales bajo controles definidos.' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <div style={{ maxWidth: 900, marginBottom: 56 }}>
          <Reveal><SectionMeta n="11" label="Preguntas frecuentes · comité de compra bancario"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
              Diez preguntas · diez respuestas directas.
            </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 ? 320 : 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 BancaCTA = () => (
  <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 }}>
            — Identifique qué decisión bancaria puede automatizar primero —
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 64, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#FFF' }}>
            De alertas fragmentadas a decisiones auditables.
          </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 datos sintéticos, anonimizados o bajo un entorno controlado.
          </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 diagnóstico bancario</Button>
            <Button variant="ghost" dark icon="arrow-right" href="seguridad.html">Revisar arquitectura de seguridad</Button>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: '1px solid #2E3140', display: 'flex', justifyContent: 'center', gap: 32, flexWrap: 'wrap' }}>
            {[
              { l: 'Conocer los SDMs para banca', h: 'ias-propietarias.html' },
              { l: 'Ver autonomía controlada', h: 'transferencia.html' },
              { l: 'Explorar detección de anomalías', h: 'producto.html' },
              { l: 'Conocer transferencia de control', h: 'transferencia.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, { BancaAutonomy, BancaGovernance, BancaSecurity, BancaTransfer, BancaVs, BancaFAQ, BancaCTA });
