// ENERGÍA · 7 dominios interactivos + 11 SDMs + 4 capas + Interoperabilidad IEC

const EnergiaDomains = () => {
  const [active, setActive] = React.useState(0);
  const domains = [
    { k: 'RED Y CONFIABILIDAD', icon: 'network', color: '#F4024C',
      question: '¿Cómo ayuda OMNIX a anticipar restricciones de red?',
      answer: 'OMNIX correlaciona alarmas, estado de activos, pronósticos de demanda y clima, ventanas de mantenimiento y capacidad disponible sobre SCADA, EMS, ADMS y OMS existentes · para priorizar eventos, evaluar restricciones, coordinar restauración y preparar respuestas ante interrupciones. Sin ejecutar maniobras críticas directamente.',
      cases: ['Correlación de alarmas', 'Priorización de eventos', 'Restricciones de capacidad', 'Congestión', 'Preparación de restauración', 'Coordinación clientes críticos', 'Registro de decisiones'],
      kpi: 'SAIDI · SAIFI · CAIDI · MTTD · MTTR · tiempo hasta decisión · interrupciones · eventos priorizados',
      systems: 'SCADA · EMS · ADMS · OMS · historian · AMI · GIS',
      autonomy: 'N2-N3 · maniobras vía sistemas especializados con aprobación',
      restriction: 'OMNIX no ejecuta directamente maniobras críticas · cambios de protección · setpoints. Requiere aprobación humana y sistemas autorizados.',
    },
    { k: 'GENERACIÓN · RENOVABLES · ALMACENAMIENTO', icon: 'sun', color: '#B8860B',
      question: '¿Cómo apoya OMNIX la integración de renovables y almacenamiento?',
      answer: 'OMNIX conecta pronósticos de generación y demanda, disponibilidad de unidades, variabilidad solar y eólica, estado de baterías, restricciones operacionales y planes de mantenimiento para detectar desviaciones, evaluar impacto, comparar alternativas de flexibilidad, coordinar órdenes y solicitar aprobación · sin realizar despacho comercial autónomo.',
      cases: ['Pronóstico gen/demanda', 'Variabilidad solar/eólica', 'Gestión operacional baterías', 'Curtailment', 'Eventos meteorológicos', 'Recursos flexibles', 'Servicios complementarios'],
      kpi: 'Disponibilidad · factor de planta · desviación de pronóstico · curtailment · restricciones · mantenimiento no programado',
      systems: 'Plataforma renovable · almacenamiento · meteo · EMS · mercados',
      autonomy: 'N2-N3 · sin despacho comercial autónomo',
      restriction: 'OMNIX no realiza despacho comercial ni controla unidades directamente sin validación, regulación y autorización del operador y del mercado aplicable.',
    },
    { k: 'ACTIVOS Y MANTENIMIENTO', icon: 'wrench', color: '#0050BD',
      question: '¿Qué activo debe intervenirse primero?',
      answer: 'OMNIX relaciona condición, historial, criticidad, carga, redundancia, consecuencia de falla, repuestos, técnicos, ventanas, contratos, seguridad, costos, clima y acceso para priorizar mantenimiento preventivo, predictivo y correctivo · gestionar obsolescencia, garantías y reemplazo. La certificación de seguridad final del activo permanece en el rol autorizado.',
      cases: ['Predictivo transformadores/turbinas', 'Priorización de activos', 'Fallas repetitivas', 'Backlog', 'Termografía/inspecciones', 'Obsolescencia', 'Reemplazo · inversión'],
      kpi: 'MTBF · MTTR · backlog · preventivos · fallas repetitivas · salud del activo · vida útil · costo del ciclo',
      systems: 'EAM · CMMS · historian · IoT · WMS · contratos',
      autonomy: 'N3 · certificación de seguridad final en el rol autorizado',
      restriction: 'OMNIX no certifica la seguridad final de un activo eléctrico. Requiere validación de Ingeniería y protocolos de seguridad aplicables.',
    },
    { k: 'OPERACIONES DE CAMPO · RESTAURACIÓN', icon: 'truck', color: '#0F5132',
      question: '¿Cómo coordina OMNIX cuadrillas y restauración?',
      answer: 'OMNIX consolida órdenes, cuadrillas, competencias, vehículos, herramientas, permisos, seguridad, acceso, clima y materiales para priorizar trabajos, preparar despacho, proponer secuencia, actualizar ETA, coordinar restauración y registrar cierre. Los procedimientos de seguridad y autorización de trabajo aplicables se mantienen.',
      cases: ['Despacho de cuadrillas', 'Verificación de competencias', 'Rutas · acceso · clima', 'ETA · comunicación', 'Coordinación con GIS', 'Restauración', 'Inspecciones'],
      kpi: 'Tiempo hasta despacho · first-time-fix · órdenes completadas · visitas repetidas · productividad · seguridad',
      systems: 'WFM · CMMS · GIS · OMS · contratistas · movilidad',
      autonomy: 'N3-N4 · con permisos y AST aplicables',
      restriction: 'Autorizaciones de trabajo · permisos · protocolos LOTO y de seguridad aplicables se preservan íntegramente.',
    },
    { k: 'ABASTECIMIENTO · REPUESTOS', icon: 'package', color: '#52557A',
      question: '¿Cómo protege OMNIX la disponibilidad de repuestos críticos?',
      answer: 'OMNIX conecta ERP, WMS, EAM/CMMS, compras, proveedores, contratos, historial de consumo, plan de mantenimiento y criticidad para predecir demanda de repuestos, recomendar redistribución entre sitios, priorizar compras, gestionar sustitutos autorizados y anticipar riesgo de cadena de suministro. Sin sustitución técnica sin equivalencia y aprobación.',
      cases: ['Predicción demanda repuestos', 'Redistribución entre sitios', 'Priorización de compras', 'Sustitutos autorizados', 'Vencimientos · obsolescencia', 'Compras urgentes', 'Riesgo cadena suministro'],
      kpi: 'Fill rate · lead time · stockouts · compras urgentes · inventario inmovilizado · OTIF · repuestos críticos disponibles',
      systems: 'ERP · WMS · EAM · CMMS · compras · proveedores',
      autonomy: 'N3 · aprobación en compras urgentes y sustitutos',
      restriction: 'OMNIX no recomienda sustitución de componentes eléctricos sin equivalencia técnica documentada y aprobación de Ingeniería.',
    },
    { k: 'FLEXIBILIDAD · DER', icon: 'battery-charging', color: '#B00238',
      question: '¿Cómo coordina OMNIX recursos distribuidos y flexibilidad?',
      answer: 'OMNIX integra pronósticos de demanda máxima, respuesta de demanda, baterías, microrredes, generación distribuida, vehículos eléctricos, nuevas cargas y flexibilidad contratada para identificar recursos disponibles, evaluar alternativas, preparar activaciones y coordinar con DERMS o sistemas equivalentes · sin control directo no autorizado.',
      cases: ['Demanda máxima · respuesta demanda', 'Baterías · microrredes', 'Generación distribuida · VE', 'Nuevas cargas', 'Flexibilidad contratada', 'Clientes críticos'],
      kpi: 'Flexibilidad activada · desviación de pronóstico · restricciones evitadas · picos gestionados',
      systems: 'DERMS · plataforma baterías · AMI · gestión de cargas',
      autonomy: 'N2-N3 · vía DERMS o sistemas especializados',
      restriction: 'Sin control directo de recursos distribuidos sin validar interfaces, autorizaciones y condiciones regulatorias aplicables.',
    },
    { k: 'CIBERSEGURIDAD OT · RESILIENCIA', icon: 'shield-check', color: '#1E1F26',
      question: '¿Cómo apoya OMNIX la ciberseguridad OT? (exclusivamente defensivo)',
      answer: 'OMNIX relaciona eventos IT/OT, identifica activos potencialmente afectados, prioriza respuesta, prepara workflows autorizados, crea tickets, coordina responsables, preserva evidencia y mide recuperación. Alcance exclusivamente defensivo · sin operaciones cibernéticas ofensivas, sin explotación, sin evasión ni instrucciones de ataque.',
      cases: ['Inventario IT/OT', 'Correlación de alertas', 'Priorización incidentes', 'Cambios configuración', 'Gestión de parches', 'Riesgo terceros', 'Contención autorizada · recuperación'],
      kpi: 'MTTD · MTTR · alertas priorizadas · falsos positivos · tiempo contención · recuperación',
      systems: 'SIEM · SOAR · CMDB · gestión de vulnerabilidades · EDR OT',
      autonomy: 'N2-N3 · contención sólo dentro de umbrales pre-autorizados',
      restriction: 'Sin operaciones cibernéticas ofensivas. Sin explotación, intrusión, evasión, malware ni instrucciones de ataque. Defensa · detección · coordinación · recuperación.',
    },
  ];
  const d = domains[active];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="03" label="Siete dominios operacionales"/></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 }}>
            Siete dominios energéticos · <span style={{ color: '#F4024C' }}>una sola plataforma cognitiva</span>.
          </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 }}>
            De generación a cliente crítico. Cada dominio con SDM propio, KPI, autonomía graduable y restricciones operacionales explícitas.
          </p>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0, marginBottom: 24, border: '1.5px solid #1E1F26' }}>
          {domains.map((dom, i) => (
            <button key={dom.k} onClick={() => setActive(i)} style={{ padding: '14px 10px', border: 'none', textAlign: 'left', cursor: 'pointer', background: active === i ? '#000' : '#FFF', color: active === i ? '#FFF' : '#1E1F26', borderRight: (i < 6) ? '1px solid #E4EBF3' : 'none', transition: 'all 220ms', display: 'flex', flexDirection: 'column', gap: 8, minHeight: 110 }}>
              <i data-lucide={dom.icon} width="18" height="18" style={{ strokeWidth: 1.5, color: active === i ? dom.color : '#96A3B5' }}/>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: active === i ? dom.color : '#96A3B5' }}>DOM · 0{i+1}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 10, letterSpacing: '-0.005em', lineHeight: 1.2 }}>{dom.k}</div>
            </button>
          ))}
        </div>
        <div key={active} style={{ border: '1.5px solid #1E1F26', background: '#FFF', padding: 40, animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 40 }}>
          <div>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 20 }}>
              <div style={{ width: 56, height: 56, border: `1.5px solid ${d.color}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide={d.icon} width="24" height="24" style={{ color: d.color, strokeWidth: 1.5 }}/>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: d.color }}>DOMINIO · 0{active+1}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, letterSpacing: '-0.02em', color: '#000', margin: '4px 0 0', lineHeight: 1.15 }}>{d.k}</h3>
              </div>
            </div>
            <div style={{ padding: '18px 20px', background: '#FAFBFD', border: `1px solid ${d.color}`, marginBottom: 16 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: d.color, textTransform: 'uppercase', marginBottom: 8 }}>PREGUNTA · AEO</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: '#000', lineHeight: 1.3, marginBottom: 12 }}>{d.question}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.6 }}>{d.answer}</div>
            </div>
            <div style={{ padding: '16px 18px', background: '#FBF3D9', border: '1px solid #B8860B' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 6 }}>Restricción operacional</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.55 }}>{d.restriction}</div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 10 }}>Casos operacionales</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {d.cases.map((c) => (
                  <span key={c} style={{ padding: '5px 12px', border: `1px solid ${d.color}`, color: d.color, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.04em' }}>{c}</span>
                ))}
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
              {[
                { l: 'Sistemas',       v: d.systems,  c: '#0050BD' },
                { l: 'Nivel autonomía', v: d.autonomy, c: '#F4024C' },
                { l: 'KPI',             v: d.kpi,      c: '#0F5132' },
              ].map((r) => (
                <div key={r.l} style={{ gridColumn: r.l === 'KPI' ? 'span 2' : 'auto' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>{r.l}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: r.c, lineHeight: 1.45 }}>{r.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// 11 SDMs para Energía
const EnergiaSDMs = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="04" label="SDMs · IAs propietarias para Energía"/></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' }}>
            Once modelos propietarios · entrenados sobre la operación energética.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
            Cada SDM se documenta con propietario, corpus, fuentes, activos, reglas, procedimientos, usos autorizados/prohibidos, nivel de riesgo, aprobaciones, monitoreo, drift, reentrenamiento y criterios de retiro.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
        {[
          { n: 'sdm.grid-ops',        t: 'SDM Operaciones de Red',       d: 'Correlación de alarmas · priorización de eventos · coordinación de restauración.',      risk: 'ALTO' },
          { n: 'sdm.reliability',      t: 'SDM Confiabilidad',            d: 'Predicción y priorización de eventos de continuidad · análisis de indicadores.',        risk: 'ALTO' },
          { n: 'sdm.generation',       t: 'SDM Generación',                d: 'Disponibilidad · desviación de pronóstico · restricciones operacionales de planta.',    risk: 'ALTO' },
          { n: 'sdm.renewables',       t: 'SDM Energías Renovables',       d: 'Pronóstico solar/eólico · variabilidad · curtailment · eventos meteorológicos.',        risk: 'MEDIO' },
          { n: 'sdm.storage-flex',    t: 'SDM Almacenamiento y Flexibilidad', d: 'Estado de carga · capacidad disponible · activación de flexibilidad autorizada.',    risk: 'ALTO' },
          { n: 'sdm.asset-mgmt',       t: 'SDM Gestión de Activos',        d: 'Salud del activo · criticidad · consecuencia de falla · ciclo de vida.',                 risk: 'ALTO' },
          { n: 'sdm.maintenance',       t: 'SDM Mantenimiento',              d: 'Priorización preventivo/predictivo/correctivo · coordinación recursos.',                  risk: 'ALTO' },
          { n: 'sdm.field-ops',        t: 'SDM Operaciones de Campo',      d: 'Despacho · secuencia · ETA · permisos y protocolos preservados.',                        risk: 'MEDIO' },
          { n: 'sdm.spares',            t: 'SDM Repuestos y Abastecimiento', d: 'Predicción de demanda · redistribución · riesgo de cadena · sustitutos autorizados.',    risk: 'MEDIO' },
          { n: 'sdm.ot-cyber',          t: 'SDM Ciberseguridad OT',          d: 'Correlación defensiva · priorización de incidentes · preservación de evidencia.',      risk: 'ALTO' },
          { n: 'sdm.continuity',        t: 'SDM Continuidad Energética',    d: 'Coordinación cross-dominios ante interrupciones y eventos mayores.',                    risk: 'ALTO' },
        ].map((s, i) => (
          <SlideIn key={s.n} direction="up" delay={i * 40}>
            <div style={{ padding: '20px 22px', background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 140, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#F4024C' }}>{s.n}</span>
                <Badge tone={s.risk === 'ALTO' ? 'fuxia' : 'warning'}>RIESGO {s.risk}</Badge>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em', color: '#000' }}>{s.t}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#52557A', lineHeight: 1.5 }}>{s.d}</div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// 4 CAPAS
const EnergiaLayers = () => {
  const layers = [
    { n: '01', k: 'BASE', color: '#0050BD',
      t: 'Fuentes IT/OT y sistemas de operación.',
      note: 'Integración vía APIs, eventos, conectores y mecanismos autorizados. Nunca acceso directo no aprobado a OT.',
      items: ['SCADA', 'EMS · ADMS', 'OMS · DERMS', 'Historian', 'EAM · CMMS', 'WFM · GIS', 'AMI', 'Plataforma renovable', 'Almacenamiento', 'Meteorología', 'Mercados', 'ERP · WMS', 'SIEM · SOAR', 'Data lake · APIs'] },
    { n: '02', k: 'COGNICIÓN PRIVADA', color: '#F4024C',
      t: '11 SDMs energéticos entrenados sobre la operación.',
      note: 'Modelos propietarios · corpus del cliente · versionados · auditables · dentro del perímetro.',
      items: ['11 SDMs', 'Datos operacionales', 'Reglas', 'Procedimientos', 'Historial', 'Conocimiento experto', 'Restricciones', 'Razonamiento auditable', 'Gobierno de modelos', 'Drift monitoring', 'HITL', 'Explicabilidad'] },
    { n: '03', k: 'ORQUESTACIÓN', color: '#1E1F26',
      t: 'Acciones coordinadas vía sistemas autorizados.',
      note: 'Cada acción configurable por umbrales de seguridad, regulación y contrato · aprobación humana en decisiones críticas.',
      items: ['Detectar', 'Contextualizar', 'Evaluar', 'Recomendar', 'Solicitar aprobación', 'Preparar acciones', 'Crear órdenes', 'Reservar recursos', 'Notificar', 'Escalar', 'Registrar', 'Medir', 'Rollback'] },
    { n: '04', k: 'IMPACTO', color: '#B00238',
      t: 'KPIs de confiabilidad, disponibilidad y continuidad.',
      note: 'Publicación cuantitativa requiere [VALIDAR MÉTRICA] con metodología firmada.',
      items: ['SAIDI · SAIFI · CAIDI', 'Disponibilidad · factor de planta', 'MTBF · MTTR', 'Backlog', 'Desviación de pronóstico', 'Curtailment', 'Flexibilidad activada', 'Tiempo hasta decisión', 'MTTD · MTTR cyber', 'Decisiones auditadas'] },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="05" label="Cómo funciona OMNIX en Energía"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 56px', color: '#000', maxWidth: 900 }}>
            Cuatro capas · vocabulario energético · integración IT/OT autorizada.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {layers.map((L, i) => (
            <SlideIn key={L.k} direction={i % 2 === 0 ? 'right' : 'left'} delay={i * 100}>
              <div style={{ padding: '32px 28px', background: '#FFF', border: '1px solid #E4EBF3', minHeight: 400, display: 'flex', flexDirection: 'column', gap: 14, transition: 'border-color 220ms' }}
                onMouseEnter={(e) => e.currentTarget.style.borderColor = L.color}
                onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E4EBF3'}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: L.color }}>CAPA {L.n} · {L.k}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#000', margin: 0, lineHeight: 1.15 }}>{L.t}</h3>
                <p style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#B8860B', margin: 0, lineHeight: 1.5 }}>* {L.note}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
                  {L.items.map((it) => (
                    <span key={it} style={{ padding: '4px 10px', border: `1px solid ${L.color}`, color: L.color, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em' }}>{it}</span>
                  ))}
                </div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// INTEROPERABILIDAD Y ESTÁNDARES ENERGÉTICOS
const EnergiaInterop = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 40 }}>
        <Reveal><SectionMeta n="06" label="Interoperabilidad y estándares"/></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' }}>
            Diseñada para integrarse con el <span style={{ color: '#F4024C' }}>lenguaje operativo de la energía</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: '#52557A', margin: '0 0 24px' }}>
            OMNIX toma como referencia estándares y marcos aplicables para diseñar integraciones, controles y modelos de información. <strong>Esta referencia no implica certificación, conformidad oficial ni cumplimiento regulatorio automático.</strong>
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 24 }}>
        {[
          { k: 'IEC 61850',         area: 'AUTOMATIZACIÓN', d: 'Comunicaciones y modelos en subestaciones. OMNIX puede consumir datos según perfiles disponibles.', color: '#0050BD' },
          { k: 'IEC 61970 · CIM',   area: 'MODELO DE INFORMACIÓN', d: 'Modelo común de información para redes. OMNIX puede alinear entidades cuando el CIM esté disponible.', color: '#F4024C' },
          { k: 'IEC 62443',         area: 'CIBERSEGURIDAD OT', d: 'Referencia para seguridad de sistemas de automatización industrial. Considerada en el diseño.',    color: '#EA384C' },
          { k: 'ISO 55001',         area: 'GESTIÓN DE ACTIVOS', d: 'Referencia para gestión de activos físicos. Considerada en SDMs de activos.',                    color: '#0F5132' },
          { k: 'NERC CIP',           area: 'NORTEAMÉRICA', d: 'Requisitos de protección de infraestructura crítica para organizaciones en el alcance.',            color: '#B8860B' },
          { k: 'NIS2',                area: 'EUROPA', d: 'Directiva de resiliencia para entidades esenciales europeas comprendidas en su alcance.',                  color: '#52557A' },
        ].map((r, i) => (
          <SlideIn key={r.k} direction="up" delay={i * 60}>
            <div style={{ padding: '22px 24px', background: '#FAFBFD', border: `1.5px solid ${r.color}`, minHeight: 180 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: r.color, marginBottom: 8 }}>{r.area}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em', color: '#000', margin: '0 0 10px' }}>{r.k}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55, color: '#52557A', margin: 0 }}>{r.d}</p>
            </div>
          </SlideIn>
        ))}
      </div>
      <div style={{ padding: '20px 24px', background: '#FBF3D9', border: '1.5px solid #B8860B' }}>
        <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
          <i data-lucide="alert-triangle" width="18" height="18" style={{ color: '#B8860B', strokeWidth: 1.5, flexShrink: 0, marginTop: 2 }}/>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#1E1F26', letterSpacing: '0.06em', lineHeight: 1.65 }}>
            <strong>Alcance de las referencias:</strong> OMNIX no afirma certificación bajo IEC 61850, CIM, IEC 62443, ISO 55001, NERC CIP ni NIS2. Cada versión, perfil, API, conformidad y jurisdicción requiere validación técnica y legal por proyecto. También aplican códigos de red locales, políticas del operador y regulación sectorial. [VALIDAR ESTÁNDAR · VERSIÓN · PERFIL · API · CONFORMIDAD · JURISDICCIÓN]
          </div>
        </div>
      </div>
    </Container>
  </section>
);

Object.assign(window, { EnergiaDomains, EnergiaSDMs, EnergiaLayers, EnergiaInterop });
