// PRIVACIDAD · Derechos + Transferencias + Subprocesadores + Incidentes + Documentos + FAQ + CTA

// DERECHOS DE LOS TITULARES
const PrivRights = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="06" label="Derechos de titulares" color="#0050BD"/></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' }}>
              Apoyo al cliente en la atención de solicitudes.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: '#52557A', margin: '0 0 24px' }}>
              Cuando OMNIX actúe como encargado o procesador, apoyará al cliente conforme al contrato para atender las solicitudes aplicables de titulares de datos.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ padding: '18px 22px', background: '#FBF3D9', border: '1.5px solid #B8860B' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 8 }}>Nota jurisdiccional</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.6 }}>
                Los derechos y plazos dependen de la legislación aplicable. OMNIX define con cada cliente el procedimiento, los responsables y los mecanismos técnicos necesarios para apoyar su atención.
              </div>
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
            <div style={{ padding: '14px 22px', borderBottom: '1px solid #E4EBF3', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase' }}>
              Derechos considerados · según jurisdicción aplicable
            </div>
            {[
              { i: 'eye',            k: 'Acceso',                        d: 'Consulta de los datos personales tratados' },
              { i: 'edit-3',         k: 'Rectificación',                 d: 'Corrección de datos inexactos o incompletos' },
              { i: 'trash-2',        k: 'Eliminación · derecho al olvido', d: 'Borrado en supuestos previstos por la ley aplicable' },
              { i: 'pause',           k: 'Restricción',                    d: 'Limitación del tratamiento en supuestos definidos' },
              { i: 'shield-off',      k: 'Oposición',                       d: 'A determinados tratamientos según base legal' },
              { i: 'download',        k: 'Portabilidad',                    d: 'Recepción en formato estructurado cuando aplique' },
              { i: 'x-circle',        k: 'Revocación del consentimiento',   d: 'Cuando la base sea el consentimiento del titular' },
              { i: 'info',            k: 'Información sobre tratamiento',   d: 'Finalidad, base legal, destinatarios, retención' },
              { i: 'user-check',      k: 'Revisión de decisiones automatizadas', d: 'En decisiones significativas · cuando corresponda' },
            ].map((r, i, arr) => (
              <div key={r.k} style={{
                padding: '14px 22px', display: 'grid', gridTemplateColumns: '28px 1fr', gap: 14,
                borderBottom: (i < arr.length - 1) ? '1px solid #E4EBF3' : 'none',
              }}>
                <i data-lucide={r.i} width="18" height="18" style={{ color: '#0050BD', strokeWidth: 1.5 }}/>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: '#000', marginBottom: 3, letterSpacing: '-0.005em' }}>{r.k}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.5 }}>{r.d}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// TRANSFERENCIAS INTERNACIONALES + SUBPROCESADORES
const PrivTransfers = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="07" label="Transferencias y subprocesadores" color="#0050BD"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000' }}>
            ¿Dónde se procesan los datos?
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: '#52557A', margin: 0 }}>
            La ubicación de procesamiento depende de la arquitectura elegida, la región de infraestructura, el proveedor autorizado, los requisitos del cliente, la residencia de datos, el contrato, la jurisdicción, los subprocesadores y las necesidades de continuidad operacional.
          </p>
        </Reveal>
      </div>

      {/* Modalidades de despliegue */}
      <div style={{ marginBottom: 40 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#0050BD', textTransform: 'uppercase', marginBottom: 20 }}>
          Modalidades de despliegue potenciales
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
          {[
            { i: 'cloud',       k: 'VPC privada',          d: 'En cloud del cliente o autorizado' },
            { i: 'server',      k: 'Regional',              d: 'Infraestructura por región definida' },
            { i: 'building-2',   k: 'On-premise',           d: 'En datacenter del cliente' },
            { i: 'shield-off',   k: 'Air-gapped',            d: 'Entornos aislados [VALIDAR]' },
            { i: 'git-merge',    k: 'Híbrido',              d: 'Combinación bajo diseño autorizado' },
          ].map((m, i) => (
            <SlideIn key={m.k} direction="up" delay={i * 60}>
              <div style={{ padding: '18px 20px', background: '#FFF', border: '1.5px solid #0050BD', minHeight: 140, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <i data-lucide={m.i} width="20" height="20" style={{ color: '#0050BD', strokeWidth: 1.5 }}/>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: '#000', letterSpacing: '-0.005em' }}>{m.k}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.5 }}>{m.d}</div>
              </div>
            </SlideIn>
          ))}
        </div>
      </div>

      {/* Salvaguardas de transferencia + Subprocesadores en 2 columnas */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <div style={{ padding: '28px 26px', background: '#FFF', border: '1.5px solid #1E1F26' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 14 }}>Transferencias internacionales</div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: '#1E1F26', margin: '0 0 16px' }}>
            OMNIX no afirma que todos los datos permanezcan siempre en el país de origen. Cuando exista una transferencia internacional, se consideran mecanismos aplicables según el marco legal.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>Mecanismos considerados · según jurisdicción</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              'Decisiones de adecuación',
              'Cláusulas contractuales tipo (SCCs)',
              'Evaluaciones de transferencia (TIA)',
              'Autorizaciones de la autoridad nacional',
              'Salvaguardas contractuales y técnicas',
              'Cifrado en tránsito y reposo',
            ].map((s) => (
              <li key={s} 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 }}/>
                {s}
              </li>
            ))}
          </ul>
          <div style={{ marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.04em' }}>
            [VALIDAR DISPONIBILIDAD POR REGIÓN · VALIDAR RESIDENCIA · VALIDAR TRANSFERENCIA]
          </div>
        </div>

        <div style={{ padding: '28px 26px', background: '#FFF', border: '1.5px solid #1E1F26' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 14 }}>Subprocesadores</div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: '#1E1F26', margin: '0 0 16px' }}>
            OMNIX mantiene, cuando corresponda al alcance contractual, información controlada sobre subprocesadores.
          </p>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>Información mantenida</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              'Lista actualizada de subprocesadores',
              'Función de cada uno',
              'Ubicación o región de procesamiento',
              'Tipo de datos tratados',
              'Salvaguardas contractuales y técnicas',
              'Procedimiento de cambios · notificación',
              'Evaluación de riesgo · obligaciones equivalentes',
            ].map((s) => (
              <li key={s} 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 }}/>
                {s}
              </li>
            ))}
          </ul>
          <div style={{ marginTop: 16, paddingTop: 14, borderTop: '1px solid #E4EBF3' }}>
            <Button variant="ghost" icon="arrow-right" href="diagnostico.html">Solicitar lista de subprocesadores</Button>
          </div>
          <div style={{ marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.04em' }}>
            No se publican proveedores sensibles ni información de arquitectura que pueda aumentar el riesgo de seguridad.
          </div>
        </div>
      </div>
    </Container>
  </section>
);

// INCIDENTES + DOCUMENTOS
const PrivIncidentsDocs = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
        {/* INCIDENTES */}
        <div>
          <Reveal><SectionMeta n="08" label="Incidentes de privacidad" color="#0050BD"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 38, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 20px', color: '#000' }}>
              Proceso general de respuesta.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: '#52557A', margin: '0 0 24px' }}>
              Los plazos, canales y responsabilidades se definen contractualmente y conforme a la normativa aplicable. Los procedimientos internos sensibles, herramientas, topologías, umbrales y playbooks detallados no se publican.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, counterReset: 'step' }}>
              {[
                'Detectar',
                'Contener',
                'Evaluar',
                'Preservar evidencia',
                'Escalar',
                'Notificar al cliente',
                'Apoyar la evaluación regulatoria',
                'Remediar',
                'Documentar',
                'Mejorar controles',
              ].map((step, i) => (
                <li key={step} style={{
                  padding: '10px 14px', background: '#FAFBFD', border: '1px solid #E4EBF3',
                  display: 'grid', gridTemplateColumns: '28px 1fr', gap: 12, alignItems: 'center',
                }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#F4024C' }}>{String(i+1).padStart(2, '0')}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#000' }}>{step}</span>
                </li>
              ))}
            </ol>
          </Reveal>
        </div>

        {/* DOCUMENTOS */}
        <div>
          <Reveal delay={80}><SectionMeta n="09" label="Documentación disponible" color="#0050BD"/></Reveal>
          <Reveal delay={140}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 38, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '0 0 20px', color: '#000' }}>
              Documentación para procesos de evaluación.
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: '#52557A', margin: '0 0 24px' }}>
              La documentación disponible depende de la etapa comercial, el alcance del proyecto y los acuerdos de confidencialidad. Los documentos marcados como pendientes se activan según proyecto.
            </p>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { d: 'Aviso de Privacidad',                          st: 'PENDIENTE' },
                { d: 'Política de Cookies',                          st: 'PENDIENTE' },
                { d: 'Data Processing Agreement · DPA',              st: 'BAJO NDA' },
                { d: 'Anexo de seguridad',                           st: 'BAJO NDA' },
                { d: 'Lista de subprocesadores',                     st: 'BAJO NDA' },
                { d: 'Matriz de responsabilidades',                  st: 'BAJO NDA' },
                { d: 'Descripción de arquitectura',                  st: 'BAJO NDA' },
                { d: 'Política de retención',                        st: 'BAJO NDA' },
                { d: 'Proceso de atención de derechos',              st: 'BAJO NDA' },
                { d: 'Resumen de respuesta a incidentes',            st: 'BAJO NDA' },
                { d: 'Evaluación de impacto · DPIA',                 st: 'POR PROYECTO' },
                { d: 'Cuestionario de seguridad · CAIQ',             st: 'BAJO NDA' },
                { d: 'Evidencia de certificaciones vigentes',        st: 'PENDIENTE' },
              ].map((r) => (
                <div key={r.d} style={{
                  padding: '10px 14px', background: '#FAFBFD', border: '1px solid #E4EBF3',
                  display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'center',
                }}>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#000' }}>{r.d}</span>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em',
                    padding: '3px 8px',
                    background: r.st === 'PENDIENTE' ? '#FBF3D9' : (r.st === 'BAJO NDA' ? '#FFF' : '#E3F2E9'),
                    color: r.st === 'PENDIENTE' ? '#B8860B' : (r.st === 'BAJO NDA' ? '#0050BD' : '#0F5132'),
                    border: `1px solid ${r.st === 'PENDIENTE' ? '#B8860B' : (r.st === 'BAJO NDA' ? '#0050BD' : '#0F5132')}`,
                  }}>{r.st}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </Container>
  </section>
);

// FAQ visible · 8 preguntas
const PrivFAQ = () => {
  const items = [
    { q: '¿OMNIX está certificada bajo ISO/IEC 27001?',
      a: 'No debe afirmarse una certificación ISO/IEC 27001 mientras no exista un certificado formal, vigente y aplicable al alcance publicado. OMNIX diseña su programa tomando la norma como referencia y publica únicamente certificaciones que hayan sido verificadas y aprobadas por un organismo acreditado. [VALIDAR CERTIFICACIÓN]' },
    { q: '¿Qué diferencia existe entre ISO 27001 e ISO 27701?',
      a: 'ISO/IEC 27001:2022 es el estándar internacional para la gestión de seguridad de la información (ISMS). ISO/IEC 27701:2025 extiende ISO 27001 con requisitos específicos para la gestión de información personal (PIMS · Privacy Information Management System), definiendo responsabilidades para controladores y procesadores. Son complementarios: 27001 protege información en general · 27701 añade la capa de privacidad.' },
    { q: '¿OMNIX cumple automáticamente con GDPR?',
      a: 'No. Ningún proveedor cumple GDPR automáticamente por sí mismo. OMNIX diseña sus controles tomando principios de GDPR como referencia cuando el tratamiento cae dentro del alcance territorial y material del reglamento. El cumplimiento efectivo depende del caso de uso, la jurisdicción, los datos tratados, el sector y el rol contractual de cada parte. La evaluación jurídica final corresponde a la organización cliente.' },
    { q: '¿Dónde se almacenan los datos?',
      a: 'Depende de la arquitectura elegida y la región contratada. Modalidades potenciales: VPC privada en cloud del cliente, infraestructura regional, on-premise en datacenter del cliente, entornos aislados o despliegue híbrido. La residencia específica se configura por proyecto según requisitos de jurisdicción, sector y continuidad operacional. [VALIDAR RESIDENCIA · JURISDICCIÓN]' },
    { q: '¿OMNIX utiliza datos de clientes para entrenar modelos?',
      a: 'Los datos del cliente no se utilizan para entrenar modelos públicos o compartidos sin una autorización contractual explícita. Los SDMs se entrenan sobre el corpus del cliente, permanecen dentro de su perímetro autorizado, y su propiedad se define en el contrato de cada proyecto. La política específica se documenta en el DPA correspondiente. [VALIDAR POLÍTICA DE ENTRENAMIENTO]' },
    { q: '¿Quién controla los datos y modelos?',
      a: 'La asignación de roles (controlador, procesador, subprocesador, propietario del modelo, propietario del corpus) se define contractualmente por proyecto. Habitualmente el cliente es controlador y propietario de los datos y modelos entrenados sobre su corpus · OMNIX actúa como procesador según DPA. La estructura exacta se documenta en la matriz de responsabilidades. [VALIDAR ALCANCE CONTRACTUAL]' },
    { q: '¿Cómo se gestionan las solicitudes de los titulares?',
      a: 'Cuando OMNIX actúe como encargado o procesador, apoyará al cliente conforme al contrato para atender solicitudes aplicables (acceso, rectificación, eliminación, restricción, oposición, portabilidad, revocación del consentimiento, información sobre tratamiento, revisión de decisiones automatizadas). Los derechos, plazos y procedimientos exactos dependen de la legislación aplicable en cada jurisdicción.' },
    { q: '¿Qué ocurre al terminar un contrato?',
      a: 'Se activa el plan de salida definido contractualmente. Puede incluir: entrega al cliente de datos, corpus, modelos, documentación, runbooks y capacitación · eliminación segura de datos en sistemas OMNIX según instrucciones del cliente · certificados de borrado · continuidad de servicio durante ventana de transición acordada. La organización debe poder operar sin OMNIX si así lo decide. [VALIDAR ALCANCE CONTRACTUAL]' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <div style={{ maxWidth: 900, marginBottom: 56 }}>
          <Reveal><SectionMeta n="10" label="Preguntas frecuentes · privacidad" color="#0050BD"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: 0, color: '#000' }}>
              Ocho preguntas · respuestas directas · sin afirmaciones no verificadas.
            </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: '#0050BD' }}>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 ? 340 : 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 PrivCTA = () => (
  <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="#0050BD" strokeWidth="1" fill="none" opacity="0.35">
        <path d="M 0 200 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 200 Q 1040 350 720 350" className="omnix-flow-dash"/>
        <path d="M 0 500 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 500 Q 1040 350 720 350" className="omnix-flow-dash"/>
      </g>
      <circle cx="720" cy="350" r="6" fill="#0050BD"/>
      <circle cx="720" cy="350" r="24" fill="none" stroke="#0050BD" strokeWidth="1" opacity="0.4"/>
    </svg>
    <Container narrow>
      <div style={{ textAlign: 'center', position: 'relative' }}>
        <Reveal>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em', color: '#0050BD', textTransform: 'uppercase', marginBottom: 24 }}>
            — Evalúe la privacidad antes de conectar sus datos —
          </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' }}>
            Privacidad diseñada desde el origen.
          </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' }}>
            OMNIX trabaja con los equipos de seguridad, privacidad, legal y arquitectura para definir fuentes, propósitos, permisos, retención, despliegue y responsabilidades antes de llevar un caso a producción.
          </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 documentación de privacidad</Button>
            <Button variant="ghost" dark icon="arrow-right" href="seguridad.html">Revisar Seguridad y Gobernanza</Button>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: '1px solid #2E3140', display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap' }}>
            {[
              { l: 'Cómo se protegen los SDMs',       h: 'ias-propietarias.html' },
              { l: 'Solicitar el DPA',                 h: 'diagnostico.html' },
              { l: 'Lista de subprocesadores',         h: 'diagnostico.html' },
              { l: 'Transferencia de control',          h: 'transferencia.html' },
              { l: 'Contactar equipo de privacidad',    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>
        <Reveal delay={340}>
          <div style={{ marginTop: 24, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#52557A', textTransform: 'uppercase' }}>
            La documentación disponible depende de la etapa comercial, el alcance y los acuerdos de confidencialidad
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

Object.assign(window, { PrivRights, PrivTransfers, PrivIncidentsDocs, PrivFAQ, PrivCTA });