const { useState, useEffect, useRef } = React;
const HAS_PDF_FICHAS = false;
// Contacto directo — Tiago (Konnen) 11-2647-0443
const KONNEN_WA = 'https://wa.me/5491126470443';
// Materiales Konnen prefiltrados en alaindustria
const ALA_KONNEN = 'https://www.alaindustria.com/marca/konnen';

const A = {
  welder:             'mph0yist-give_him_a_more_premium_202605221138.jpeg',
  welderMobile:       'mqif8y6z-hero-mobile.png',
  migCarbon:          'mppixnpm-Migmag-carbono.webp',
  migCarbonHover:     'mppixo25-carbono-2.webp',
  fcawNoGas:          'mppixoew-fcaw.webp',
  fcawFlux:           'mppixo58-fcaw-flux.webp',
  migInox:            'mppixohv-inox.webp',
  migInoxHover:       'mppixogd-inox-2.webp',
  migAl:              'mppixo0h-aluminio.webp',
  migAlHover:         'mppixnz2-aluminio-2.webp',
  
  // Varillas TIG (Nuevas)
  tigCarbon:          'mqh5ihnf-V-Carb-1.webp',
  tigCarbonHover:     'mqh5ihlp-V-carb-2.webp',
  tigInox:            'mqig6pgl-varilla-inox-1.webp',
  tigInoxHover:       'mqh5ihqf-V-inox-2.webp',
  tigAlum:            'mqh5ihml-V-alum-1.webp',
  tigAlumHover:       'mqh5ihpf-V-alum-2.webp',

  // Tungstenos (Actualizadas)
  tungsteno:          'mqh5js69-Tungstenos-1.webp',
  tungstenHover:      'mqh5jrym-Tungstenos-2.webp',

  // Electrodos Revestidos (Actualizadas)
  revestInox:         'mqh5jrzx-Revesito-inox-1.webp',
  revestInoxHover:    'mqh5js4q-Revestidos-inox-2.webp',
  revestCarbon:       'mqig6phd-Revestidos-carbono-1.webp',
  revestCarbonHover:  'mqh5js31-Revestidos-carbono-2.webp',

  quimicos:           'mppixo3k-Decapantes.webp',
  quimicos2:          'mpoq76dz-quimicos.webp',
  quimicos3:          'assets/chemical.webp',
  logo:               'assets/logo_konnen_pos_copia.webp',
  logoNeg:            'assets/logo_konnen_negativo_02.webp',
  globalMap:          'assets/global_map.webp',
  smartPerf:          'assets/smart_performance.svg',
  famiq:              'mpgze6dv-famiq-logo-2.webp',
  ala:                'assets/logo_alaindustria.webp',
  whatsapp:           'assets/icon_partner.webp'
};

/* ════════════════════════════════════════════════════════════════════════════
   📦  CATÁLOGO DE PRODUCTOS — fuente de la verdad de las páginas de producto.
   Esta es la única tabla de datos que renderiza la página de producto (ProductView).
   El CSV `mpr77cbv-Ficha_Tecnica_Konnen_MASTER.csv` NO se lee en runtime.

   Cómo editar:
     · bullets             → array de strings, se renderiza debajo del título del hero.
                             Por ahora todos los productos usan PRODUCT_PLACEHOLDER_BULLETS.
                             Para personalizar, agregá `bullets:[...]` en el producto.
     · corriente           → string mostrado como característica del header (al lado de Datos técnicos)
     · gasProteccion       → string mostrado como característica del header
     · norma / diametros   → string mostrados como características del header
     · tipo                → string mostrado como característica del header (opcional)
     · aleaciones          → string del bloque "Aleaciones aplicables"
     · quimica             → tabla de composición química
     · presentacionTable   → tabla con filas = formato; cols agrupadas en
                             Carrete [Ø interior, Ø exterior, Ancho] + Packaging [Ancho, Alto, Profundidad].
                             Por ahora todos los productos usan PRODUCT_PLACEHOLDER_PRESENTACION.
                             Para personalizar, agregá `presentacionTable:[...]` en el producto.
     · fichas              → array de fichas PDF (texto del link)
   ════════════════════════════════════════════════════════════════════════════ */

/* PLACEHOLDERS COMPARTIDOS — editá acá para cambiar el default de TODOS los productos.
   Si querés un valor distinto por producto, agregalo dentro de PRODUCTS_DATA. */
const PRODUCT_PLACEHOLDER_BULLETS = [
  'Terminación de cordón homogénea',
  'Mínima generación de escoria y de simple remoción',
  'Poca salpicadura',
  'Baja generación de humos',
  'Packaging con sellado al vacío para evitar humedad',
  'Rollos de plástico de alta dureza',
];
const PRODUCT_PLACEHOLDER_CORRIENTE     = '—';   // ← tipo de corriente + polaridad por producto (ej: CC · Electrodo +)
const PRODUCT_PLACEHOLDER_GAS           = 'Ar + 1-2% O₂';  // ← editá por producto cuando tengas el dato real
const PRODUCT_PLACEHOLDER_ALEACIONES    = 'Aleaciones aplicables — texto placeholder. Reemplazar por aleaciones reales por producto.';
const PRODUCT_PLACEHOLDER_PRESENTACION  = [
  { formato:'15 Kg',  carrete:{di:'52 mm', de:'200 mm', ancho:'60 mm'},  packaging:{ancho:'220 mm', alto:'220 mm', prof:'80 mm'} },
  { formato:'200 Kg', carrete:{di:'52 mm', de:'600 mm', ancho:'160 mm'}, packaging:{ancho:'620 mm', alto:'620 mm', prof:'180 mm'} },
];

const PRODUCTS_DATA = {
  'MIG/MAG — Acero inoxidable': {
    img: 'assets/professional_product_an.webp',
    imgs: ['mpqz61to-Aluminio-1.webp','mpqz61vu-Aluminio-2.webp','mpqz61xt-Aluminio-3.webp'],
    cat:'Alambres', code:'AL-INOX', norma:'AWS A5.9',
    tags:['ER308L','ER316L','ER309L','ER310','ER312'],
    lead:'Alambres macizos para soldadura de aceros inoxidables austeníticos. Excelente resistencia a la corrosión y acabado estético superior.',
    bullets:[
      'Devanado capa a capa de alta precisión que evita atascamiento',
      'Trefilado ultra limpio que elimina residuos de grasa o aceites causantes de porosidad por carbono o contaminación del baño de fusión',
      'Estabilidad de arco que garantiza bajo índice de salpicaduras y generación de humos',
      'Rollos de plástico de alta resistencia a impacto',
      'Packaging con sellado al vacío para evitar el ingreso de humedad',
    ],
    corriente:'CC · Electrodo +',
    posiciones:['Plana','Horizontal','Vertical ascendente','Vertical descendente','Sobre-cabeza','Tubería horizontal','Tubería inclinada'],
    quimica:[
      {label:'C',  vals:['0.02%','0.02%','0.02%','0.10%','0.10%']},
      {label:'Cr', vals:['20.1%','18.5%','23.5%','26.0%','29.5%']},
      {label:'Ni', vals:['9.8%','12.2%','13.0%','21.0%','9.0%']},
      {label:'Mo', vals:['—','2.5%','—','—','—']},
    ],
    mecanicas:[
      {label:'TS (MPa)', vals:['590','570','≥ 520','≥ 550','≥ 660']},
      {label:'El (%)',   vals:['42','40','≥ 30','≥ 30','≥ 22']},
    ],
    gases:['Ar + 1-2% O₂','CO₂'],
    presentacion:'1 Kg | 5 Kg | 15 Kg', diametros:'Ø 0.9 | Ø 1.2 | Ø 1.6', tipo:'Sólido',
    aleaciones:[
      'Aceros inoxidables 301/302/304/304L/308/308L.',
      'Aceros inoxidables 316/316L.',
      'Aceros inoxidables 309/309L.',
      'Aceros inoxidables 310/310S.',
      'Aceros inoxidables 309/310/312.',
    ],
    fichas:['ER308L · Ficha técnica','ER316L · Ficha técnica','ER309L · Ficha técnica','ER310 · Ficha técnica','ER312 · Ficha técnica'],
    tableType:'alambre',
    presentacionTable:[
      { formato:'1 Kg',  carrete:{de:'200mm', di:'16mm',  ancho:'45mm'},  packaging:{alto:'105mm', ancho:'45mm',  prof:'105mm'} },
      { formato:'5 Kg',  carrete:{de:'200mm', di:'52mm',  ancho:'60mm'},  packaging:{alto:'210mm', ancho:'60mm',  prof:'210mm'} },
      { formato:'15 Kg', carrete:{de:'300mm', di:'52mm', ancho:'105mm'}, packaging:{alto:'270mm', ancho:'105mm', prof:'270mm'} },
    ],
    skus:[
      [ // ER308L
        {d:'Ø 0.90', f:'1 Kg',  c:'349506'},
        {d:'Ø 0.90', f:'5 Kg',  c:'349501'},
        {d:'Ø 0.90', f:'15 Kg', c:'343029'},
        {d:'Ø 1.20', f:'15 Kg', c:'343030'},
        {d:'Ø 1.60', f:'15 Kg', c:'346936'},
      ],
      [ // ER316L
        {d:'Ø 0.90', f:'1 Kg',  c:'349507'},
        {d:'Ø 0.90', f:'5 Kg',  c:'349503'},
        {d:'Ø 0.90', f:'15 Kg', c:'343031'},
        {d:'Ø 1.20', f:'15 Kg', c:'343032'},
        {d:'Ø 1.60', f:'15 Kg', c:'346937'},
      ],
      [ // ER309L
        {d:'Ø 0.90', f:'15 Kg', c:'349095'},
        {d:'Ø 1.20', f:'15 Kg', c:'349096'},
      ],
      [ // ER310
        {d:'Ø 0.90', f:'15 Kg', c:'349869'},
        {d:'Ø 1.20', f:'15 Kg', c:'349880'},
      ],
      [ // ER312
        {d:'Ø 0.90', f:'15 Kg', c:'349882'},
        {d:'Ø 1.20', f:'15 Kg', c:'349883'},
      ],
    ],
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/alambre-mig-para-acero-inoxidable?marca=KONNEN',
    linkFamiq: 'https://www.famiq.com.ar/producto?familia=soldadura-en-acero-inoxidable&bloqueHome=1&tipoCatalogo=resumen&caracteristica_marca=konnen&sub-familia=alambres-mig',
  },
  'MIG/MAG — Acero al carbono': {
    img: 'assets/mig_welding_wire_spool.webp',
    imgs: ['mpqz61ob-Al-carb-1.webp','mpqz61pz-Al-carb-2.webp','mpqz61rq-Al-carb-3.webp'],
    cat:'Alambres', code:'AL-CARB', norma:'AWS A5.18',
    tags:['ER70S-6'],
    lead:'Alambre cobreado de alta eficiencia de deposición para uso industrial pesado y estructuras. Compatible con mezclas Ar/CO₂ y CO₂ puro.',
    bullets:[
      'Devanado capa a capa de alta precisión que evita atascamiento',
      'Mínima generación de escoria y de simple remoción',
      'Estabilidad de arco que garantiza bajo índice de salpicaduras y generación de humos',
      'Rollos de plástico de alta resistencia a impacto',
    ],
    corriente:'CC · Electrodo +',
    posiciones:['Plana','Horizontal','Vertical ascendente','Vertical descendente','Sobre-cabeza','Tubería horizontal','Tubería inclinada'],
    quimica:[
      {label:'C',  vals:['0.08%']},
      {label:'Mn', vals:['1.50%']},
      {label:'Si', vals:['0.90%']},
    ],
    mecanicas:[
      {label:'TS (MPa)', vals:['560']},
      {label:'YS (MPa)', vals:['460']},
    ],
    gases:['CO₂','Ar + CO₂'],
    presentacion:'5 Kg | 15 Kg', diametros:'Ø 0.6 | Ø 0.8 | Ø 0.9 | Ø 1.2', tipo:'Sólido',
    aleaciones:'Aceros al carbono y baja aleación (SAE 1010–1040 / ASTM A36 / A572 / A516).',
    fichas:['ER70S-6 · Ficha técnica'],
    tableType:'alambre',
    presentacionTable:[
      { formato:'5 Kg',  carrete:{de:'200mm', di:'52mm', ancho:'65mm'},  packaging:{alto:'210mm', ancho:'65mm',  prof:'210mm'} },
      { formato:'15 Kg', carrete:{de:'270mm', di:'52mm', ancho:'105mm'}, packaging:{alto:'270mm', ancho:'105mm', prof:'270mm'} },
    ],
    skus:[
      [ // ER70S-6
        {d:'Ø 0.60', f:'5 Kg',  c:'200014'},
        {d:'Ø 0.80', f:'5 Kg',  c:'200015'},
        {d:'Ø 0.80', f:'15 Kg', c:'200011'},
        {d:'Ø 0.90', f:'5 Kg',  c:'200016'},
        {d:'Ø 0.90', f:'15 Kg', c:'200012'},
        {d:'Ø 1.20', f:'15 Kg', c:'200013'},
      ],
    ],
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/alambre-mig-para-acero-al-carbono?marca=KONNEN',
  },
  'FCAW — Sin gas': {
    img: 'mppixoew-fcaw.webp',
    imgs: ['mppixoew-fcaw.webp','mppixnz2-aluminio-2.webp','mpqz61vu-Aluminio-2.webp'],
    cat:'Alambres', code:'AL-FLUX', norma:'AWS A5.20',
    tags:['E71T-11'],
    lead:'Alambre tubular autoprotegido para alta productividad en montaje y mantenimiento. Ideal para exteriores donde el viento impide el gas de protección.',
    bullets:[
      'Homogeneidad del flujo interno (Flux) que evita caídas o picos de arco, garantizando un bajo índice de salpicaduras',
      'Tubo de acero templado con excelente resistencia al aplastamiento en el alimentador',
      'Baja generación de humos y vapores pesados',
      'Cierre perfecto del tubo metálico exterior para blindar químicamente el flux interno contra la humedad ambiental',
    ],
    corriente:'CC · Electrodo −',
    posiciones:['Plana','Horizontal','Vertical ascendente','Vertical descendente','Sobre-cabeza','Tubería horizontal','Tubería inclinada'],
    quimica:[
      {label:'C',  vals:['0.18%']},
      {label:'Mn', vals:['0.80%']},
      {label:'Al', vals:['1.2%']},
    ],
    mecanicas:[
      {label:'TS (MPa)', vals:['540']},
      {label:'YS (MPa)', vals:['450']},
    ],
    gases:[],
    presentacion:'5 Kg', diametros:'Ø 0.8 | Ø 0.9 | Ø 1.2', tipo:'Tubular autoprotegido',
    aleaciones:'Aceros al carbono estructurales (ASTM A36 / A572 / A283).',
    fichas:['E71T-11 · Ficha técnica'],
    tableType:'alambre',
    presentacionTable:[
      { formato:'5 Kg', carrete:{de:'200mm', di:'52mm', ancho:'65mm'}, packaging:{alto:'210mm', ancho:'65mm', prof:'210mm'} },
    ],
    skus:[
      [ // E71T-11
        {d:'Ø 0.80', f:'5 Kg', c:'200022'},
        {d:'Ø 0.90', f:'5 Kg', c:'200023'},
        {d:'Ø 1.20', f:'5 Kg', c:'200024'},
      ],
    ],
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/alambre-mig-para-acero-al-carbono?marca=KONNEN',
  },
  'MIG — Aluminio': {
    img: 'mppixo0h-aluminio.webp',
    imgs: ['mpqz61to-Aluminio-1.webp','mpqz61vu-Aluminio-2.webp','mpqz61xt-Aluminio-3.webp'],
    cat:'Alambres', code:'AL-ALU', norma:'AWS A5.10',
    tags:['ER4043','ER5356'],
    lead:'Alambres de aluminio de alta pureza. Alimentación suave y cordones limpios con excelente penetración y mínimas salpicaduras.',
    bullets:[
      'Alambre libre de óxido de aluminio nativo (Al₂O₃) e impurezas incrustadas, asegurando un arco limpio y libre de poros químicos',
      'Diámetro homogéneo que evita el riesgo de atascamiento dentro del liner',
      'Distribución pareja de silicio (4043) o magnesio (5356) para evitar variaciones en la fluidez del baño y grietas por contracción térmica',
      'Materia prima procesada en atmósferas controladas al vacío para erradicar el hidrógeno causante de la porosidad en aluminio',
      'Packaging aluminizado multicapa sellado al vacío para evitar el ingreso de humedad',
    ],
    corriente:'CC · Electrodo + (pulsada)',
    posiciones:['Plana','Horizontal','Vertical ascendente','Vertical descendente','Sobre-cabeza','Tubería horizontal','Tubería inclinada'],
    quimica:[
      {label:'Si', vals:['5.0%','—']},
      {label:'Mg', vals:['—','5.0%']},
      {label:'Al', vals:['Bal.','Bal.']},
    ],
    mecanicas:[
      {label:'TS (MPa)', vals:['Min 186','Min 265']},
    ],
    gases:['Ar puro'],
    presentacion:'2 Kg | 7 Kg', diametros:'Ø 0.9 | Ø 1.2', tipo:'Sólido',
    aleaciones:[
      'Aleaciones de aluminio serie 3xxx / 4xxx / 6xxx.',
      'Aleaciones de aluminio serie 5xxx / 6xxx.',
    ],
    fichas:['ER4043 · Ficha técnica','ER5356 · Ficha técnica'],
    tableType:'alambre',
    presentacionTable:[
      { formato:'2 Kg', carrete:{de:'200mm', di:'52mm', ancho:'65mm'},  packaging:{alto:'210mm', ancho:'65mm',  prof:'210mm'} },
      { formato:'7 Kg', carrete:{de:'270mm', di:'52mm', ancho:'105mm'}, packaging:{alto:'270mm', ancho:'105mm', prof:'270mm'} },
    ],
    skus:[
      [ // ER4043
        {d:'Ø 0.90', f:'2 Kg', c:'200025'},
        {d:'Ø 0.90', f:'7 Kg', c:'200026'},
        {d:'Ø 1.20', f:'2 Kg', c:'200027'},
        {d:'Ø 1.20', f:'7 Kg', c:'200028'},
      ],
      [ // ER5356
        {d:'Ø 0.90', f:'2 Kg', c:'200029'},
        {d:'Ø 0.90', f:'7 Kg', c:'200030'},
        {d:'Ø 1.20', f:'2 Kg', c:'200031'},
        {d:'Ø 1.20', f:'7 Kg', c:'200032'},
      ],
    ],
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/alambre-mig-para-aluminio?marca=KONNEN',
  },
  'Revestidos — Acero al carbono': {
    img: A.revestCarbon,
    imgs: [A.revestCarbonHover, 'mqirk93s-Revestidos-1.webp', 'mqirk95u-Revestidos-2.webp', 'mqirk982-Revestidos-3.webp'],
    cat:'Electrodos', code:'EL-CARB', norma:'AWS A5.1',
    tableType:'electrodo',
    largo:'300 – 400 mm',
    tags:['E6013','E7018','E6010'],
    lead:'Electrodos revestidos para múltiples aplicaciones. Desde herrería ligera hasta soldaduras de alta responsabilidad estructural.',
    bullets:[
      'Embalaje industrial reforzado de 20 kg con cajas individuales de 5 kg selladas al vacío para evitar el ingreso de humedad',
      'Mínima generación de escoria y de simple remoción',
      'Baja generación de humos y vapores pesados',
      'Encendido y reencendido instantáneo en caliente: punta tratada con grafito y óxidos conductores que facilita iniciar el arco al primer toque, incluso tras interrumpir la soldadura',
    ],
    corriente:['CA o CC','CA o CC · Electrodo +','CC · Electrodo +'],
    posiciones:[
      ['Plana','Horizontal','Vertical ascendente','Sobre-cabeza','Tubería horizontal','Tubería inclinada'],
      ['Plana','Horizontal','Vertical ascendente','Sobre-cabeza','Tubería horizontal','Tubería inclinada'],
      ['Plana','Horizontal','Vertical ascendente','Vertical descendente','Sobre-cabeza','Tubería horizontal','Tubería inclinada'],
    ],
    quimica:[
      {label:'Tipo', vals:['Rutílico','Básico','Celulósico']},
    ],
    mecanicas:[
      {label:'TS (MPa)', vals:['500','550','500']},
    ],
    gases:[],
    presentacion:'Caja 5 kg', diametros:'Ø 2.0 | Ø 2.5 | Ø 3.2 | Ø 4.0', tipo:'Revestido',
    aleaciones:'Aceros al carbono y baja aleación (SAE 1010–1040 / ASTM A36 / A572).',
    fichas:['E6013 · Ficha técnica','E7018 · Ficha técnica','E6010 · Ficha técnica'],
    presentacionTable:[
      { diametro:'Ø 2.0', largo:'300 mm', cajaUnit:{alto:'75mm',ancho:'270mm',prof:'370mm'}, caja5k:{alto:'70mm',ancho:'65mm',prof:'355mm'} },
      { diametro:'Ø 2.5', largo:'350 mm', cajaUnit:{alto:'75mm',ancho:'270mm',prof:'370mm'}, caja5k:{alto:'70mm',ancho:'65mm',prof:'355mm'} },
      { diametro:'Ø 3.2', largo:'350 mm', cajaUnit:{alto:'75mm',ancho:'270mm',prof:'370mm'}, caja5k:{alto:'70mm',ancho:'65mm',prof:'355mm'} },
      { diametro:'Ø 4.0', largo:'400 mm', cajaUnit:{alto:'75mm',ancho:'240mm',prof:'410mm'}, caja5k:{alto:'70mm',ancho:'55mm',prof:'400mm'} },
    ],
    skus:[
      [ // E6013
        {d:'Ø 2.0', c:'200001'},
        {d:'Ø 2.5', c:'200002'},
        {d:'Ø 3.2', c:'200003'},
        {d:'Ø 4.0', c:'200004'},
      ],
      [ // E7018
        {d:'Ø 2.5', c:'200005'},
        {d:'Ø 3.2', c:'200006'},
        {d:'Ø 4.0', c:'200007'},
      ],
      [ // E6010
        {d:'Ø 2.5', c:'200008'},
        {d:'Ø 3.2', c:'200009'},
        {d:'Ø 4.0', c:'200010'},
      ],
    ],
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/electrodo-revestido-para-acero-al-carbono?marca=KONNEN',
  },
  'Revestidos — Inox': {
    img: A.revestInox,
    imgs: [A.revestInoxHover, 'mqirk93s-Revestidos-1.webp', 'mqirk95u-Revestidos-2.webp', 'mqirk982-Revestidos-3.webp'],
    cat:'Electrodos', code:'EL-INOX', norma:'AWS A5.4',
    tableType:'electrodo',
    tags:['E308L','E309L','E312','E316L'],
    lead:'Electrodos revestidos para soldadura de aceros inoxidables austeníticos. Alta resistencia a la corrosión y aspecto de cordón uniforme.',
    bullets:[
      'Espesor del fundente perfectamente centrado respecto al alma metálica para evitar arco errático o efecto soplado',
      'Encendido y reencendido instantáneo en caliente: punta tratada con grafito y óxidos conductores',
      'Resinas ligantes de alta calidad que impiden que el revestimiento se debilite en caliente',
      'Fusión del núcleo en microgotas estables que reducen las salpicaduras',
      'Transferencia eficiente de cromo, níquel y molibdeno a través del arco sin pérdidas por volatilización',
      'Packaging plástico de alta calidad que evita el ingreso de humedad',
    ],
    corriente:'CA o CC · Electrodo +',
    posiciones:['Plana','Horizontal','Vertical ascendente','Sobre-cabeza','Tubería horizontal','Tubería inclinada'],
    quimica:[
      {label:'Tipo', vals:['Rut./Básico','Básico','Básico','Básico']},
    ],
    mecanicas:[
      {label:'TS (MPa)', vals:['520','520','—','520']},
    ],
    gases:[],
    presentacion:'Caja 5 kg', diametros:'Ø 2.0 | Ø 2.6 | Ø 3.2 | Ø 4.0', tipo:'Revestido',
    aleaciones:[
      'Aceros inoxidables 301/302/304/304L/308/308L.',
      'Aceros inoxidables 309/309L.',
      'Aceros inoxidables 309/310/312.',
      'Aceros inoxidables 316/316L.',
    ],
    fichas:['E308L · Ficha técnica','E309L · Ficha técnica','E312 · Ficha técnica','E316L · Ficha técnica'],
    presentacionTable:[
      { diametro:'Ø 2.0', cajaUnit:{alto:'70mm',ancho:'270mm',prof:'325mm'}, caja5k:{alto:'65mm',ancho:'65mm',prof:'310mm'} },
      { diametro:'Ø 2.6', cajaUnit:{alto:'70mm',ancho:'270mm',prof:'325mm'}, caja5k:{alto:'65mm',ancho:'65mm',prof:'310mm'} },
      { diametro:'Ø 3.2', cajaUnit:{alto:'70mm',ancho:'270mm',prof:'325mm'}, caja5k:{alto:'65mm',ancho:'65mm',prof:'310mm'} },
      { diametro:'Ø 4.0', cajaUnit:{alto:'70mm',ancho:'270mm',prof:'325mm'}, caja5k:{alto:'65mm',ancho:'65mm',prof:'310mm'} },
    ],
    skus:[
      [ // E308L
        {d:'Ø 2.0', c:'312487'},
        {d:'Ø 2.6', c:'312488'},
        {d:'Ø 3.2', c:'312489'},
        {d:'Ø 4.0', c:'312490'},
      ],
      [ // E309L
        {d:'Ø 2.0', c:'349097'},
        {d:'Ø 2.6', c:'349098'},
        {d:'Ø 3.2', c:'349099'},
      ],
      [ // E312
        {d:'Ø 2.6', c:'349910'},
        {d:'Ø 3.2', c:'349911'},
      ],
      [ // E316L
        {d:'Ø 2.0', c:'312510'},
        {d:'Ø 2.6', c:'312512'},
        {d:'Ø 3.2', c:'312513'},
        {d:'Ø 4.0', c:'312514'},
      ],
    ],
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/electrodo-revestido-para-acero-inoxidable?marca=KONNEN',
    linkFamiq: 'https://www.famiq.com.ar/producto?familia=soldadura-en-acero-inoxidable&bloqueHome=1&sub-familia=electrodos&tipoCatalogo=resumen&caracteristica_marca=konnen',
  },
  'Electrodo de tungsteno': {
    img: A.tungsteno,
    imgs: [A.tungstenHover, 'mqirk99v-Tungsteno-1.webp', 'mqirk9bl-Tungsteno-2.webp', 'mqirk92c-Tungsteno-3.webp'],
    cat:'Electrodos', code:'EL-TUN', norma:'AWS A5.12',
    tags:['WL-15','WC-20','WP'],
    lead:'Electrodos de tungsteno de alta calidad para soldadura TIG de precisión. Arco estable y larga duración según material base.',
    bullets:[
      'Electrodos de tungsteno de alta estabilidad de arco',
      'Larga vida útil y encendido de arco facilitado',
      'Calidades específicas para corriente continua o alterna',
      'Empaques de protección individuales',
    ],
    corriente:['CC / CA','CC / CA','CA'],
    posiciones:['Plana','Horizontal','Vertical ascendente','Vertical descendente','Sobre-cabeza','Tubería horizontal','Tubería inclinada'],
    quimica:[
      {label:'W',       vals:['98.5%','98%','99.5%']},
      {label:'Aditivo', vals:['Lantano','Cerio','Puro']},
    ],
    mecanicas:[
      {label:'Color',    vals:['Dorado','Gris','Verde']},
      {label:'Corriente',vals:['CC/CA','CC/CA','CA']},
    ],
    gases:[],
    presentacion:'10 unidades', diametros:'Ø 1.6 | Ø 2.4 | Ø 3.2', tipo:'Tungsteno',
    aleaciones:[
      'Acero inoxidable, acero al carbono, cobre y titanio.',
      'Acero inoxidable, acero al carbono, cobre y titanio.',
      'Aluminio y sus aleaciones (CA · Alta frecuencia).',
    ],
    fichas:['WL-15 · Ficha técnica','WC-20 · Ficha técnica','WP · Ficha técnica'],
    tableType:'tungsteno',
    largo:'175 mm',
    presentacionTable:[
      { diametro:'Ø 1.6', largo:'175 mm', pkg:{alto:'200mm',ancho:'55mm',prof:'5mm'} },
      { diametro:'Ø 2.4', largo:'175 mm', pkg:{alto:'200mm',ancho:'55mm',prof:'5mm'} },
      { diametro:'Ø 3.2', largo:'175 mm', pkg:{alto:'200mm',ancho:'55mm',prof:'5mm'} },
    ],
    skus:[
      [ // WL-15 (dorado) — nuevos SKUs
        {d:'Ø 1.6', c:'349216'},
        {d:'Ø 2.4', c:'349217'},
        {d:'Ø 3.2', c:'350661'},
      ],
      [ // WC-20 (gris) — nuevos SKUs
        {d:'Ø 1.6', c:'349218'},
        {d:'Ø 2.4', c:'349219'},
      ],
      [ // WP (verde)
        {d:'Ø 1.6', c:'200041'},
        {d:'Ø 2.4', c:'200042'},
        {d:'Ø 3.2', c:'200043'},
      ],
    ],
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/consumibles-de-soldadura-y-plasma/electrodos-de-tungsteno?marca=KONNEN',
    linkFamiq: 'https://www.famiq.com.ar/producto?familia=soldadura-en-acero-inoxidable&bloqueHome=1&tipoCatalogo=resumen&caracteristica_marca=konnen&sub-familia=electrodos-tungsteno',
  },

  /* ─────────── NUEVOS PRODUCTOS (Excel 2026-06) ─────────── */

  'FCAW — Con gas': {
    img: 'mppixo58-fcaw-flux.webp',
    imgs: ['mppixo58-fcaw-flux.webp','mppixogd-inox-2.webp','mpqz61vu-Aluminio-2.webp'],
    cat:'Alambres', code:'AL-FLUX-G', norma:'AWS A5.20',
    tags:['E71T-1C'],
    lead:'Alambre tubular para alta productividad con gas de protección CO₂ o mezclas Ar/CO₂. Mayor eficiencia de deposición para estructuras de alta responsabilidad.',
    bullets:[
      'Alta tasa de deposición para estructuras de alta responsabilidad',
      'Mínima generación de escoria y de simple remoción',
      'Estabilidad de arco con bajo índice de salpicaduras',
      'Packaging con sellado al vacío para evitar la humedad',
    ],
    corriente:'CC · Electrodo +',
    posiciones:['Plana','Horizontal','Vertical ascendente','Sobre-cabeza','Tubería horizontal','Tubería inclinada'],
    quimica:[
      {label:'C',  vals:['0.12%']},
      {label:'Mn', vals:['1.25%']},
      {label:'Si', vals:['0.50%']},
    ],
    mecanicas:[
      {label:'TS (MPa)', vals:['560']},
      {label:'YS (MPa)', vals:['470']},
    ],
    gases:['CO₂','Ar + CO₂'],
    presentacion:'15 Kg', diametros:'Ø 1.2 | Ø 1.6', tipo:'Tubular con gas',
    aleaciones:'Aceros al carbono y baja aleación (ASTM A36 / A572 / A516 Gr.70).',
    fichas:['E71T-1C · Ficha técnica'],
    tableType:'alambre',
    presentacionTable:[
      { formato:'15 Kg', carrete:{de:'270mm', di:'52mm', ancho:'105mm'}, packaging:{alto:'270mm', ancho:'105mm', prof:'270mm'} },
    ],
    skus:[
      [ // E71T-1C
        {d:'Ø 1.20', f:'15 Kg', c:'200020'},
        {d:'Ø 1.60', f:'15 Kg', c:'200021'},
      ],
    ],
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/alambre-mig-para-acero-al-carbono?marca=KONNEN',
  },

  'Varilla TIG — Acero al carbono': {
    img: A.tigCarbon,
    imgs: [A.tigCarbon, A.tigCarbonHover],
    cat:'Alambres', code:'VAR-CARB', norma:'AWS A5.18',
    tags:['ER70S-3'],
    lead:'Varillas de aporte para soldadura TIG de aceros al carbono. Excelente penetración y acabado en uniones de alta calidad.',
    corriente:'CC · Electrodo −',
    bullets:[
      'Varillas rectas de 1 m con extremo cortado a medida',
      'Sellado anti-humedad — listas para soldar al abrir',
      'Composición química uniforme para arco TIG estable',
      'Cordones limpios sin salpicadura ni proyección',
      'Acabado satinado para mejor lectura del baño de fusión',
      'Material trazable bajo norma AWS A5.18',
    ],
    posiciones:['Plana','Horizontal','Vertical ascendente','Vertical descendente','Sobre-cabeza','Tubería horizontal','Tubería inclinada'],
    quimica:[
      {label:'C',  vals:['0.07%']},
      {label:'Mn', vals:['1.40%']},
      {label:'Si', vals:['0.70%']},
    ],
    mecanicas:[
      {label:'TS (MPa)', vals:['560']},
      {label:'YS (MPa)', vals:['460']},
    ],
    gases:['Ar','Ar + CO₂ (hasta 5%)'],
    presentacion:'Paquete 5 Kg', diametros:'Ø 1.6 | Ø 2.4 | Ø 3.2', largo:'1000 mm', tipo:'Varilla sólida',
    aleaciones:'Aceros al carbono y baja aleación (ASTM A36 / A515 / A516 / SAE 1010–1040).',
    fichas:['ER70S-3 · Ficha técnica'],
    tableType:'varilla',
    presentacionTable:[
      { diametro:'Ø 1.6', largo:'1000 mm', secc:'35 × 35 mm' },
      { diametro:'Ø 2.4', largo:'1000 mm', secc:'35 × 35 mm' },
      { diametro:'Ø 3.2', largo:'1000 mm', secc:'35 × 35 mm' },
    ],
    skus:[
      [ // ER70S-3
        {d:'Ø 1.6', c:'200017'},
        {d:'Ø 2.4', c:'200018'},
        {d:'Ø 3.2', c:'200019'},
      ],
    ],
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/varilla-tig-para-acero-al-carbono?marca=KONNEN',
  },

  'Varilla TIG — Aluminio': {
    img: A.tigAlum,
    imgs: [A.tigAlum, A.tigAlumHover, A.tigCarbonHover],
    cat:'Alambres', code:'VAR-ALU', norma:'AWS A5.10',
    tags:['ER4043','ER5356'],
    lead:'Varillas de aporte para soldadura TIG de aluminio. Alta pureza y alimentación suave para cordones limpios en todas las aleaciones.',
    corriente:'CA · Alta frecuencia',
    bullets:[
      'Varillas rectas de 1 m con extremo cortado a medida',
      'Aluminio de alta pureza — sin óxido superficial',
      'Sellado anti-humedad: evita porosidad en el cordón',
      'Compatibles con TIG manual, orbital y robotizado',
      'Cordones brillantes con mínima decoloración térmica',
      'Material trazable bajo norma AWS A5.10',
    ],
    posiciones:['Plana','Horizontal','Vertical ascendente','Vertical descendente','Sobre-cabeza','Tubería horizontal','Tubería inclinada'],
    quimica:[
      {label:'Si', vals:['5.0%','—']},
      {label:'Mg', vals:['—','5.0%']},
      {label:'Al', vals:['Bal.','Bal.']},
    ],
    mecanicas:[
      {label:'TS (MPa)', vals:['Min 186','Min 265']},
    ],
    gases:['Ar puro'],
    presentacion:'Paquete', diametros:'Ø 1.6 | Ø 2.4 | Ø 3.2 | Ø 4.0', largo:'1000 mm', tipo:'Varilla sólida',
    aleaciones:[
      'Aleaciones de aluminio serie 3xxx / 4xxx / 6xxx.',
      'Aleaciones de aluminio serie 5xxx / 6xxx.',
    ],
    fichas:['ER4043 · Ficha técnica','ER5356 · Ficha técnica'],
    tableType:'varilla',
    presentacionTable:[
      { diametro:'Ø 1.6', largo:'1000 mm', secc:'55 × 55 mm' },
      { diametro:'Ø 2.4', largo:'1000 mm', secc:'55 × 55 mm' },
      { diametro:'Ø 3.2', largo:'1000 mm', secc:'55 × 55 mm' },
      { diametro:'Ø 4.0', largo:'1000 mm', secc:'55 × 55 mm' },
    ],
    skus:[
      [ // ER4043
        {d:'Ø 1.6', c:'200033'},
        {d:'Ø 2.4', c:'200034'},
        {d:'Ø 3.2', c:'200035'},
        {d:'Ø 4.0', c:'200036'},
      ],
      [ // ER5356
        {d:'Ø 1.6', c:'200037'},
        {d:'Ø 2.4', c:'200038'},
        {d:'Ø 3.2', c:'200039'},
        {d:'Ø 4.0', c:'200040'},
      ],
    ],
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/varilla-tig-para-aluminio?marca=KONNEN',
  },

  'Varilla TIG — Inox': {
    img: A.tigInox,
    imgs: [A.tigInox, A.tigInoxHover, A.tigCarbonHover],
    cat:'Alambres', code:'VAR-INOX', norma:'AWS A5.9',
    tags:['ER308L','ER309L','ER310','ER312','ER316L'],
    lead:'Varillas de aporte para soldadura TIG de aceros inoxidables austeníticos. Alta resistencia a la corrosión y acabado estético superior.',
    corriente:'CC · Electrodo −',
    bullets:[
      'Varillas rectas de 1 m con extremo cortado a medida',
      'Sin contaminación carbonosa — no decolora ni mancha el Inox',
      'Sellado anti-humedad: evita porosidad y manchado',
      'Composición austenítica estable para cordón homogéneo',
      'Resistencia a la corrosión equiparable al metal base',
      'Material trazable bajo norma AWS A5.9',
    ],
    posiciones:['Plana','Horizontal','Vertical ascendente','Vertical descendente','Sobre-cabeza','Tubería horizontal','Tubería inclinada'],
    quimica:[
      {label:'Cr', vals:['20.1%','23.5%','26.0%','29.5%','18.5%']},
      {label:'Ni', vals:['9.8%','13.0%','21.0%','9.0%','12.2%']},
      {label:'Mo', vals:['—','—','—','—','2.5%']},
    ],
    mecanicas:[
      {label:'TS (MPa)', vals:['590','590','—','—','570']},
    ],
    gases:['Ar','Ar + 1-2% O₂'],
    presentacion:'Paquete 5 Kg', diametros:'Ø 1.6 | Ø 2.4', largo:'1000 mm', tipo:'Varilla sólida',
    aleaciones:[
      'Aceros inoxidables 301/302/304/304L/308/308L.',
      'Aceros inoxidables 309/309L.',
      'Aceros inoxidables 316/316L.',
    ],
    fichas:['ER308L · Ficha técnica','ER309L · Ficha técnica','ER316L · Ficha técnica'],
    tableType:'varilla',
    presentacionTable:[
      { diametro:'Ø 1.6', largo:'1000 mm', secc:'40 × 40 mm' },
      { diametro:'Ø 2.4', largo:'1000 mm', secc:'40 × 40 mm' },
    ],
    skus:[
      [ // ER308L
        {d:'Ø 1.6', c:'343033'},
        {d:'Ø 2.4', c:'343034'},
      ],
      [ // ER309L
        {d:'Ø 1.6', c:'349100'},
        {d:'Ø 2.4', c:'349101'},
      ],
      [ // ER310
        {d:'Ø 1.6', c:'349881'},
        {d:'Ø 2.4', c:'349884'},
      ],
      [ // ER312
        {d:'Ø 1.6', c:'349885'},
        {d:'Ø 2.4', c:'349886'},
      ],
      [ // ER316L
        {d:'Ø 1.6', c:'343035'},
        {d:'Ø 2.4', c:'343036'},
      ],
    ],
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/varilla-tig-para-acero-inoxidable?marca=KONNEN',
    linkFamiq: 'https://www.famiq.com.ar/producto?familia=soldadura-en-acero-inoxidable&bloqueHome=1&tipoCatalogo=resumen&caracteristica_marca=konnen&sub-familia=varillas-tig',
  },
};

const QUIMICOS_DATA = [
  {
    cat: 'decapantes',
    code: 'QUIM-DECAP',
    name: 'Decapante en Gel',
    format: 'Gel — Potes de 1 Kg / 5 Kg / 15 Kg',
    app: 'Remoción localizada en cordones de soldadura y zonas afectadas.',
    ventajaPrincipal: 'Fórmula en gel tixotrópico de alta adherencia, ideal para superficies verticales.',
    ventajas: [
      'Sin escurrimiento — permanece activo sobre el cordón',
      'No produce vapores irritantes ni vapores nocivos',
      'Compatible con aceros 304, 316 y toda la serie 300'
    ],
    usoResumido: 'Limpiar superficie. Aplicar con pincel de cerda natural o espátula sobre el cordón. Dejar actuar entre 5 y 50 minutos según temperatura. Enjuagar con abundante agua.',
    rendimiento: '5 a 6 m² por kilo (aprox. 60 metros lineales de soldadura).',
    validez: '12 meses desde la fecha de fabricación.',
    pdf: '#',
    img: A.quimicos,
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/decapantes-y-pasivantes?marca=KONNEN',
    linkFamiq: 'https://www.famiq.com.ar/producto?familia=soldadura-en-acero-inoxidable&bloqueHome=1&sub-familia=decapantes-y-pasivantes&tipoCatalogo=resumen&caracteristica_marca=konnen'
  },
  {
    cat: 'decapantes',
    code: 'QUIM-DECAP-L',
    name: 'Decapante Líquido',
    format: 'Líquido — Bidones de 5 L / 20 L / 200 L',
    app: 'Decapado por inmersión de piezas complejas o chorreado de estructuras.',
    ventajaPrincipal: 'Cobertura uniforme en rincones inaccesibles y piezas de geometría compleja.',
    ventajas: [
      'Ideal para baños de inmersión industrial',
      'Acción rápida y uniforme en toda la superficie',
      'Remueve contaminantes calcáreos y óxidos pesados'
    ],
    usoResumido: 'Sumergir las piezas en el baño utilizando canastillas plásticas o de acero inoxidable. Mantener el baño a menos de 50°C. El tiempo varía según el estado de la pieza.',
    rendimiento: 'Variable según dilución y estado de contaminación de la pieza.',
    validez: '48 meses desde la fecha de fabricación.',
    pdf: '#',
    img: A.quimicos2,
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/decapantes-y-pasivantes?marca=KONNEN',
    linkFamiq: 'https://www.famiq.com.ar/producto?familia=soldadura-en-acero-inoxidable&bloqueHome=1&sub-familia=decapantes-y-pasivantes&tipoCatalogo=resumen&caracteristica_marca=konnen'
  },
  {
    cat: 'pasivantes',
    code: 'QUIM-PASIV',
    name: 'Pasivante en Gel',
    format: 'Gel — Potes de 1 Kg / 5 Kg',
    app: 'Regeneración localizada de la capa de óxido de cromo post-decapado.',
    ventajaPrincipal: 'Restaura la resistencia a la corrosión en cordones de soldadura mecánicamente limpiados.',
    ventajas: [
      'Acelera la pasivación natural del acero inoxidable',
      'Formulación libre de cloruros que no mancha',
      'Evita la corrosión por picadura en zonas térmicamente afectadas'
    ],
    usoResumido: 'Aplicar inmediatamente después del decapado o limpieza mecánica con pincel o espátula. Dejar actuar entre 1 y 3 horas. Enjuagar obligatoriamente con agua o neutralizante.',
    rendimiento: 'Rendimiento localizado por metro de cordón tratado.',
    validez: '12 meses desde la fecha de fabricación.',
    pdf: '#',
    img: A.quimicos,
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/decapantes-y-pasivantes?marca=KONNEN',
    linkFamiq: 'https://www.famiq.com.ar/producto?familia=soldadura-en-acero-inoxidable&bloqueHome=1&sub-familia=decapantes-y-pasivantes&tipoCatalogo=resumen&caracteristica_marca=konnen'
  },
  {
    cat: 'pasivantes',
    code: 'QUIM-PASIV-L',
    name: 'Pasivante Líquido',
    format: 'Líquido — Bidones de 5 L / 20 L / 200 L',
    app: 'Pasivado por circulación en tuberías (CIP) o inmersión de piezas.',
    ventajaPrincipal: 'Excelente capacidad de remoción de contaminación ferrosa incrustada en circuitos de cañerías.',
    ventajas: [
      'Apto para sistemas de circulación cerrada en cañerías',
      'Actúa como descalcificante y descontaminante calcáreo',
      'Puede utilizarse diluido en agua según la aplicación'
    ],
    usoResumido: 'Hacer circular por el interior del circuito o sumergir las piezas durante un lapso máximo de 2 horas. Enjuagar con agua desmineralizada.',
    rendimiento: 'Variable según dilución del baño.',
    validez: '24 meses desde la fecha de fabricación.',
    pdf: '#',
    img: A.quimicos2,
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/decapantes-y-pasivantes?marca=KONNEN',
    linkFamiq: 'https://www.famiq.com.ar/producto?familia=soldadura-en-acero-inoxidable&bloqueHome=1&sub-familia=decapantes-y-pasivantes&tipoCatalogo=resumen&caracteristica_marca=konnen'
  },
  {
    cat: 'pasivantes',
    code: 'QUIM-PASIV-S',
    name: 'Pasivante en Spray',
    format: 'Líquido para Spray — Bidones de 5 L / 20 L',
    app: 'Tratamiento pasivante rápido de grandes superficies o piezas verticales.',
    ventajaPrincipal: 'Se aplica por pulverización manual cubriendo grandes áreas en minutos sin chorrear.',
    ventajas: [
      'Alta adherencia sobre planos verticales e inclinados',
      'No requiere equipos de aire comprimido',
      'Ideal para tanques, tolvas y estructuras de gran tamaño'
    ],
    usoResumido: 'Rociar la superficie limpia con bomba pulverizadora manual. Dejar actuar. NUNCA aplicar por aspersión neumática con flujo combinado de aire.',
    rendimiento: '5 a 6 m² por kilo pulverizado.',
    validez: '12 meses desde la fecha de fabricación.',
    pdf: '#',
    img: A.quimicos3,
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/decapantes-y-pasivantes?marca=KONNEN',
    linkFamiq: 'https://www.famiq.com.ar/producto?familia=soldadura-en-acero-inoxidable&bloqueHome=1&sub-familia=decapantes-y-pasivantes&tipoCatalogo=resumen&caracteristica_marca=konnen'
  },
  {
    cat: 'neutralizantes',
    code: 'QUIM-NEUT',
    name: 'Neutralizante en Pasta',
    format: 'Pasta — Potes de 1 Kg / 5 Kg',
    app: 'Neutralización inmediata de residuos y efluentes del decapado ácido.',
    ventajaPrincipal: 'Elimina la acidez residual en la superficie y precipita metales pesados y fluoruro soluble.',
    ventajas: [
      'Garantiza la seguridad en el manejo posterior de la pieza',
      'Evita la contaminación y ayuda al tratamiento de efluentes',
      'Fácil remoción con agua corriente'
    ],
    usoResumido: 'Agitar y aplicar con cepillo o espátula plástica sobre los residuos de decapado. Dejar actuar de 10 a 15 minutos. Enjuagar con abundante agua y recoger efluentes.',
    rendimiento: 'Suficiente para neutralizar efluentes localizados del cordón.',
    validez: '24 meses desde la fecha de fabricación.',
    pdf: '#',
    img: A.quimicos3,
    linkAla: 'https://www.alaindustria.com/categorias/soldadura-y-corte-plasma/materiales-de-aporte/decapantes-y-pasivantes?marca=KONNEN',
    linkFamiq: 'https://www.famiq.com.ar/producto?familia=soldadura-en-acero-inoxidable&bloqueHome=1&sub-familia=decapantes-y-pasivantes&tipoCatalogo=resumen&caracteristica_marca=konnen'
  },
  {
    cat: 'especialidades',
    code: 'QUIM-ANTI',
    name: 'Antiadherente Aerosol',
    format: 'Aerosol — Envases de 400 ml',
    app: 'Protección de torchas y piezas contra salpicaduras de soldadura.',
    ventajaPrincipal: 'Formulación sintética libre de siliconas que permite pintar o galvanizar la pieza sin problemas.',
    ventajas: [
      'Evita que las proyecciones se adhieran a la boquilla',
      'No genera porosidades en el cordón de soldadura',
      'Ahorra tiempo de amolado y limpieza post-soldadura'
    ],
    usoResumido: 'Rociar una capa uniforme a unos 20 cm sobre la boquilla de la torcha y las zonas de la pieza a proteger antes de soldar.',
    rendimiento: 'Alta eficiencia y cobertura por aerosol.',
    validez: '24 meses desde la fecha de fabricación.',
    pdf: '#',
    img: A.quimicos3,
    linkAla: 'https://www.alaindustria.com/marca/konnen'
  },
  {
    cat: 'especialidades',
    code: 'QUIM-PAST',
    name: 'Pasta Cerámica',
    format: 'Pasta — Potes de 300 g',
    app: 'Protección extrema de boquillas en procesos de alta temperatura y robótica.',
    ventajaPrincipal: 'Resiste hasta 1500°C brindando una barrera protectora de hasta 8 horas continuas.',
    ventajas: [
      'Especialmente desarrollado para soldadura robotizada',
      'Reduce notablemente los tiempos de parada para limpieza',
      'Prolonga la vida útil de toberas y difusores'
    ],
    usoResumido: 'Sumergir la boquilla caliente de la torcha directamente en el bote de pasta para formar una película protectora refractaria.',
    rendimiento: 'Larga duración por aplicación individual.',
    validez: '24 meses desde la fecha de fabricación.',
    pdf: '#',
    img: A.quimicos,
    linkAla: 'https://www.alaindustria.com/marca/konnen'
  },
  {
    cat: 'especialidades',
    code: 'QUIM-BACK',
    name: 'Pasta de Respaldo',
    format: 'Pasta — Potes de 500 g',
    app: 'Protección de raíz de soldadura en aceros inoxidables sin purga de gas.',
    ventajaPrincipal: 'Reemplaza el gas de purga trasera (Argón) en soldaduras de cañerías y tubos.',
    ventajas: [
      'Ahorro directo de tiempo y volumen de gas de respaldo',
      'Fácil aplicación mediante pincelado de la junta',
      'Protección uniforme contra la oxidación por aire'
    ],
    usoResumido: 'Mezclar la pasta con alcohol metílico hasta lograr una consistencia cremosa. Pintar el reverso de la junta (raíz) antes de soldar.',
    rendimiento: 'Variable según el ancho del cordón y diámetro del tubo.',
    validez: '12 meses desde la fecha de fabricación.',
    pdf: '#',
    img: A.quimicos3,
    linkAla: 'https://www.alaindustria.com/marca/konnen'
  },
  {
    cat: 'especialidades',
    code: 'QUIM-DETEC',
    name: 'Detector de Molibdeno',
    format: 'Líquido reactivo — Frasco gotero de 50 ml',
    app: 'Identificación rápida en frío de aceros inoxidables serie 316.',
    ventajaPrincipal: 'Diferenciación instantánea entre AISI 304 y 316 mediante un cambio de color a rosado.',
    ventajas: [
      'Resultados en 15 segundos mediante ensayo no destructivo',
      'Evita mezclas accidentales de material en almacén u obra',
      'Portátil y autónomo sin necesidad de instrumental costoso'
    ],
    usoResumido: 'Limpiar la superficie metálica a testear. Aplicar una sola gota del reactivo. Si el líquido se torna rosado/rojizo, confirma presencia de Molibdeno (316).',
    rendimiento: 'Cientos de testeos y verificaciones por frasco gotero.',
    validez: '12 meses desde la fecha de fabricación.',
    pdf: '#',
    img: A.quimicos2,
    linkAla: 'https://www.alaindustria.com/marca/konnen',
    linkFamiq: 'https://www.famiq.com.ar/producto?nombreEs=*&caracteristica_marca=konnen&tipoCatalogo=normal'
  },
  {
    cat: 'especialidades',
    code: 'QUIM-PULI',
    name: 'Pastas de Pulido (B/R/A)',
    format: 'Bloques de pasta sólida',
    app: 'Abrillantado y acabado espejo en superficies de acero inoxidable.',
    ventajaPrincipal: 'Proporciona una terminación estética libre de rayas finas y con brillo uniforme.',
    ventajas: [
      'Tres grados de abrasión/brillo (Blanca, Roja, Azul)',
      'Fácil transferencia a discos de fieltro o algodón',
      'Excelente adherencia al paño de pulir'
    ],
    usoResumido: 'Frotar el bloque contra el paño de pulido giratorio para impregnarlo. Pulir la pieza de acero inoxidable ejerciendo presión moderada.',
    rendimiento: 'Alto rendimiento por bloque sólido.',
    validez: 'Sin vencimiento si se mantiene en ambiente seco.',
    pdf: '#',
    img: A.quimicos,
    linkAla: 'https://www.alaindustria.com/marca/konnen',
    linkFamiq: 'https://www.famiq.com.ar/producto?nombreEs=*&caracteristica_marca=konnen&tipoCatalogo=normal'
  },
  {
    cat: 'especialidades',
    code: 'QUIM-LIMPI',
    name: 'Limpiador Protectivo',
    format: 'Líquido con rociador — Envases de 500 ml',
    app: 'Mantenimiento, limpieza y protección de acero inoxidable cepillado o pulido.',
    ventajaPrincipal: 'Limpia huellas y grasitud al mismo tiempo que deposita una micra protectora repelente al polvo.',
    ventajas: [
      'Ideal para mantenimiento de campanas, ascensores y mobiliario',
      'Acabado brillante y sin marcas de vetas',
      'Repele la suciedad y las marcas dactilares'
    ],
    usoResumido: 'Rociar levemente sobre la superficie. Repasar con un paño de microfibra limpio en el sentido del veteado del acero inoxidable.',
    rendimiento: 'Película ultradelgada de alta cobertura.',
    validez: '36 meses desde la fecha de fabricación.',
    pdf: '#',
    img: A.quimicos2,
    linkAla: 'https://www.alaindustria.com/marca/konnen',
    linkFamiq: 'https://www.famiq.com.ar/producto?nombreEs=*&caracteristica_marca=konnen&tipoCatalogo=normal'
  },
  {
    cat: 'especialidades',
    code: 'ABR-DISC',
    name: 'Disco de Corte Konnen',
    format: 'Disco de Corte — Caja de 25 / 50 u.',
    app: 'Corte rápido y de alta precisión de aceros inoxidables y carbono.',
    ventajaPrincipal: 'Libre de Hierro, Cloro y Azufre — evita la contaminación ferrosa del inoxidable.',
    ventajas: [
      'Espesor ultrafino para menor pérdida de material',
      'Corte frío con mínima rebaba',
      'Larga vida útil bajo exigencia industrial'
    ],
    usoResumido: 'Montar en amoladora angular respetando el sentido de giro. Utilizar elementos de protección ocular e industrial.',
    rendimiento: 'Alto rendimiento bajo exigencia industrial.',
    validez: 'Sin vencimiento.',
    pdf: '#',
    img: A.quimicos3,
    linkAla: 'https://www.alaindustria.com/marca/konnen'
  },
  {
    cat: 'especialidades',
    code: 'ABR-FLAP',
    name: 'Disco Flap Zirconado',
    format: 'Disco Flap — Caja de 10 u.',
    app: 'Desbaste de soldaduras y terminación simultánea en una sola operación.',
    ventajaPrincipal: 'Soporte de tela zirconada de alta durabilidad para desbaste pesado y terminación uniforme.',
    ventajas: [
      'No contamina el acero inoxidable',
      'Excelente tasa de remoción de material',
      'Acabado suave y constante'
    ],
    usoResumido: 'Montar en amoladora angular respetando las RPM máximas. Ejercer presión moderada para evitar recalentamiento.',
    rendimiento: 'Alto rendimiento y gran tasa de remoción.',
    validez: 'Sin vencimiento.',
    pdf: '#',
    img: A.quimicos,
    linkAla: 'https://www.alaindustria.com/marca/konnen'
  }
];

const normaSlides = ['AWS A5.9','AWS A5.18','AWS A5.10','AWS A5.20'];

const WELD_ICONS = {
  'Plana':               'mph1ckf9-Group-3.svg',
  'Horizontal':          'mph1ckf8-Group-5.svg',
  'Vertical ascendente': 'mph1ckf8-Group.svg',
  'Vertical descendente':'mph1ckf9-Group-1.svg',
  'Sobre-cabeza':        'mph1ckfb-Group-4.svg',
  'Tubería horizontal':  'mph1ckf9-Group-2.svg',
  'Tubería inclinada':   'mph1ckf8-Group-6.svg',
  'Todas las posiciones':'mph1ckf9-Group-3.svg',
};

/* ──────────────────────────────────────── NAV */
function Nav({ dark, onNavigate }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const go = (id) => { setMenuOpen(false); onNavigate('home', id); };

  // Bloqueo de scroll del body mientras el menú mobile está abierto.
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const ink     = dark ? '#FAFAFA' : 'rgb(10,10,10)';
  const pill    = dark ? 'rgba(255,255,255,0.10)' : 'rgba(255,255,255,0.6)';
  const bdr     = dark ? 'transparent' : 'rgba(10,10,10,0.10)';
  const sep     = dark ? 'rgba(255,255,255,0.12)' : 'rgba(10,10,10,0.10)';
  const logoInk = dark ? '#FAFAFA' : 'rgb(10,10,10)';

  return (
    <nav className="nav-container" style={{
      position:'fixed', top:0, left:0, right:0, zIndex:1000,
      display:'grid', gridTemplateColumns:'1fr auto 1fr', alignItems:'center',
      padding:'0 4.6vw', height:'clamp(72px,5.3vw,101.874px)', transition:'all .3s'
    }}>
      {/* Degrade superior — negro sobre secciones oscuras, color de página sobre claras */}
      <div style={{
        position:'absolute', top:0, left:0, right:0, height:130,
        background:'linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, transparent 100%)',
        opacity: dark ? 1 : 0, transition:'opacity 0.45s ease',
        pointerEvents:'none', zIndex:-1
      }}/>
      <div style={{
        position:'absolute', top:0, left:0, right:0, height:130,
        background:'linear-gradient(to bottom, rgba(244,242,238,0.92) 0%, rgba(244,242,238,0.55) 45%, transparent 100%)',
        opacity: dark ? 0 : 1, transition:'opacity 0.45s ease',
        pointerEvents:'none', zIndex:-1
      }}/>
      <div style={{ display:'flex', justifyContent:'flex-start', alignItems:'center' }}>
        <button className="nav-logo-btn" onClick={() => { setMenuOpen(false); onNavigate('home'); }} style={{ background:'none', border:'none', padding:0, cursor:'pointer', display:'flex', alignItems:'center' }}>
          <svg viewBox="0 40 479.32 78" xmlns="http://www.w3.org/2000/svg" style={{ height:'clamp(36px,2.8vw,50px)', width:'auto', transition:'fill .3s' }}>
            <g fill={logoInk}>
              <path d="M141.33,44.06c-20.52,0-37.83,14.97-41.14,35.58c-1.53,9.54,0.85,18.6,6.73,25.49c5.73,6.72,14.31,10.58,23.55,10.58c20.85,0,37.77-14.63,41.14-35.58c1.53-9.54-0.85-18.6-6.73-25.49C159.16,47.92,150.57,44.06,141.33,44.06z M119.37,80.13c1.62-9.83,10-17.23,19.49-17.23c4.32,0,8.08,1.61,10.58,4.53c2.67,3.12,3.74,7.46,3,12.22c-1.6,9.66-10.16,17.23-19.49,17.23c-4.39,0-8.18-1.63-10.69-4.58C119.61,89.18,118.59,84.86,119.37,80.13z"/>
              <polygon points="227.32,44.06 221.2,83.95 201.3,44.06 181.69,44.06 170.43,115.71 190.22,115.71 196.34,75.82 216.24,115.71 235.85,115.71 247.11,44.06"/>
              <polygon points="297.53,44.06 291.4,83.95 271.5,44.06 251.89,44.06 240.63,115.71 260.42,115.71 266.54,75.82 286.44,115.71 306.05,115.71 317.31,44.06"/>
              <polygon points="339.04,61.75 371.94,61.75 374.79,44.06 322.09,44.06 310.83,115.71 363.51,115.71 366.36,98.03 333.36,98.03 334.92,88.39 367.15,88.39 369.78,71.09 337.56,71.09"/>
              <polygon points="425.89,44.06 418.73,83.95 398.83,44.06 379.22,44.06 367.96,115.71 387.74,115.71 393.87,75.82 413.76,115.71 433.38,115.71 445.67,44.06"/>
              <polygon points="48.32,44.22 45.68,61.03 68.1,44.22"/>
            </g>
            <path fill="#E20E18" d="M102.7,111.67l-1.6-2.82l-4.1-7.21l-1.7-2.99l-4.04-7.12l-1.7-2.99l-4.09-7.2l-0.77-1.35l31.78-35.92H90.85L68.52,70.51H63.9l4.21-20.2L45.69,67.12l-8.62,48.59h19.78l4.11-26.44h6.3l15.18,26.44H105L102.7,111.67z"/>
          </svg>
        </button>
      </div>
      <button className="mobile-menu-btn" onClick={() => setMenuOpen(!menuOpen)} style={{ border:'none', background:'none', padding:8 }}>
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={ink} strokeWidth="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
      </button>
      <div className={`nav-pill-wrapper ${menuOpen ? 'open' : ''}`} style={{
        display:'flex', alignItems:'center', borderRadius:10,
        background:pill, border:`1.661px solid ${bdr}`,
        backdropFilter:'blur(13px)', transition:'all .3s',
        height:'clamp(48px,3.22vw,61.874px)', fontWeight:300, justifySelf:'center'
      }}>
        <button className="mobile-close-btn" onClick={() => setMenuOpen(false)} style={{ display:'none', background:'none', border:'none', cursor:'pointer' }}>
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#FFF" strokeWidth="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
        </button>
        {[
          ['Productos', () => { setMenuOpen(false); onNavigate('home','productos'); }],
          ['Comprar',   () => { setMenuOpen(false); onNavigate('home','cadena'); }],
          ['Programar Demo', () => { setMenuOpen(false); onNavigate('home','contacto'); }],
        ].map(([lbl, fn, bold], i) => (
          <React.Fragment key={lbl}>
            <button onClick={fn} className="hover-cta" style={{
              padding:'0 clamp(12px,1.38vw,26.571px)', color: menuOpen ? '#FFF' : ink,
              fontSize:'clamp(11px,1.12vw,21.59px)', border:'none', background:'none', cursor:'pointer', whiteSpace: 'nowrap',
              fontWeight: bold ? 900 : 400
            }}>{lbl}</button>
            <div className="nav-sep" style={{ width:'1.661px', height:'clamp(16px,1.38vw,26.571px)', background:sep }}/>
          </React.Fragment>
        ))}
        <a href={KONNEN_WA} target="_blank" rel="noopener noreferrer" style={{ padding:'0 clamp(10px,0.99vw,19px)', display:'flex', alignItems:'center' }}>
          <img src={A.whatsapp} alt="WhatsApp" style={{ height:'clamp(22px,1.7vw,30px)', width:"39px", objectFit:'contain', opacity:.7, filter: dark ? 'brightness(0) invert(1)' : 'none' }}loading="lazy" />
        </a>
        <div className="nav-sep" style={{ width:'1.661px', height:'clamp(16px,1.38vw,26.571px)', background:sep }}/>
        <button onClick={() => { setMenuOpen(false); onNavigate('home','contacto'); }} className="hover-cta" style={{
          padding:'0 clamp(12px,1.38vw,26.571px)',
          color: dark ? '#FF6B72' : 'rgb(226,14,24)',
          fontSize:'clamp(11px,1.12vw,21.59px)', border:'none', background:'none', cursor:'pointer', whiteSpace: 'nowrap'
        }}>Contacto</button>
      </div>
      <div/>

      {/* ── Menú mobile: pill flotante que se expande en bloque (≤1024px) ── */}
      <div className={`mm-root ${menuOpen ? 'open' : ''}`}>
        <div className="mm-backdrop" onClick={() => setMenuOpen(false)}/>
        <div className="mm-bar" role="dialog" aria-label="Menú">
          <div className="mm-head">
            <button className="mm-iconbtn" onClick={() => setMenuOpen(!menuOpen)} aria-label={menuOpen ? 'Cerrar menú' : 'Abrir menú'} aria-expanded={menuOpen}>
              <svg className="mm-burger" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="rgba(10,10,10,0.45)" strokeWidth="2" strokeLinecap="round">
                <line className="mm-burger-l1" x1="3" y1="6" x2="21" y2="6"/>
                <line className="mm-burger-l2" x1="3" y1="12" x2="21" y2="12"/>
                <line className="mm-burger-l3" x1="3" y1="18" x2="21" y2="18"/>
              </svg>
            </button>
            <button onClick={() => { setMenuOpen(false); onNavigate('home'); }} style={{ background:'none', border:'none', padding:0, cursor:'pointer', display:'flex', alignItems:'center' }} aria-label="Konnen — Inicio">
              <img className="mm-logo" src={A.logo} alt="Konnen"/>
            </button>
            <a className="mm-iconbtn" href={KONNEN_WA} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="rgba(10,10,10,0.45)"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2zm5.8 14.09c-.25.7-1.44 1.33-1.99 1.36-.53.03-.53.42-3.34-.7-2.81-1.11-4.62-3.95-4.76-4.13-.14-.18-1.15-1.53-1.15-2.92 0-1.39.73-2.07.99-2.36.25-.28.55-.35.73-.35.18 0 .37 0 .53.01.17.01.4-.06.62.48.25.6.86 2.07.93 2.22.07.14.11.3.02.48-.09.18-.14.28-.28.44-.14.16-.29.35-.42.47-.14.14-.28.28-.12.55.16.28.72 1.18 1.54 1.92 1.06.94 1.95 1.24 2.23 1.38.28.14.44.11.6-.07.16-.18.7-.81.89-1.09.18-.28.37-.23.62-.14.25.09 1.6.75 1.87.89.28.14.46.21.53.32.07.11.07.66-.18 1.36z"/></svg>
            </a>
          </div>
          <div className="mm-body">
            <div className="mm-body-inner">
              <div className="mm-cards">
                {[
                  ['Productos', () => go('productos')],
                  ['Comprar',   () => go('cadena')],
                  ['Contacto',  () => go('contacto')],
                ].map(([lbl, fn]) => (
                  <button key={lbl} className="mm-card" onClick={fn}>
                    <b>{lbl}</b>
                    <svg className="mm-arrow" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#0A0A0A" strokeWidth="1.7"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}

/* ──────────────────────────────────────── PROD CARD */
function ProdCard({ img, imgHover, title, norma, tags, onSelect, placeholderLabel, imgAspectRatio = '4/5', imgHoverPosition = 'center' }) {
  const [hovered, setHovered] = useState(false);
  return (
    <article onClick={onSelect} className="hover-card" style={{
      borderRadius:8, background:'#FFF', overflow:'hidden',
      display:'flex', flexDirection:'column', cursor:'pointer', height:'100%'
    }} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
      <div style={{ background:'#F8F8F6', position:'relative', overflow:'hidden', aspectRatio: imgAspectRatio, flexShrink:0 }}>
        {placeholderLabel ? (
          <div style={{
            position:'absolute', inset:0,
            display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
            background:'linear-gradient(140deg,#EEEAE0 0%,#E2DDD2 100%)',
            color:'rgba(10,10,10,0.40)', textAlign:'center', padding:'12px 16px'
          }}>
            <div style={{ width:48, height:48, borderRadius:'50%', border:'1.5px dashed rgba(10,10,10,0.30)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:14 }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <rect x="3" y="5" width="18" height="14" rx="2"/>
                <circle cx="8.5" cy="10.5" r="1.5"/>
                <path d="M21 15l-5-5L5 19"/>
              </svg>
            </div>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:9.5, letterSpacing:'.22em', textTransform:'uppercase', fontWeight:500 }}>{placeholderLabel}</div>
            <div style={{ fontFamily:'var(--font-mono)', fontSize:8, letterSpacing:'.16em', textTransform:'uppercase', marginTop:6, opacity:.55 }}>Foto pendiente</div>
          </div>
        ) : (
          <>
            <img src={img} style={{ width:'100%', height:'100%', objectFit:'cover', position:'absolute', inset:0, transition:'opacity 0.35s' }}loading="lazy" />
            {imgHover && <img src={imgHover} style={{ width:'100%', height:'100%', objectFit:'cover', objectPosition: imgHoverPosition, position:'absolute', inset:0, opacity: hovered ? 1 : 0, transition:'opacity 0.35s' }}loading="lazy" />}
          </>
        )}
      </div>
      <div style={{ padding:'12px 15px 15px', display:'flex', flexDirection:'column', gap:4, flex:1, overflow:'hidden' }}>
        <div className="prod-card-header" style={{ display:'flex', flexDirection:'column', gap:2 }}>
          <div style={{ fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(11px,0.95vw,17px)', lineHeight:1.4, color:'var(--ink)', whiteSpace:'pre-line', overflowWrap:'break-word' }}>{title}</div>
          {norma && <div className="prod-card-norma" style={{ fontFamily:'var(--font-sans)', fontWeight:400, fontSize:'clamp(10px,0.8vw,13px)', lineHeight:1.15, color:'rgba(0,0,0,0.45)', textTransform:'uppercase', letterSpacing:'.02em', overflowWrap:'break-word' }}>{norma}</div>}
        </div>
        <div className="prod-card-tags" style={{ marginTop:'auto' }}>
          {tags && <div style={{ display:'flex', flexWrap:'wrap', gap:3 }}>
            {tags.map(t => <span key={t} style={{ padding:'2px 6px', borderRadius:3, background:'var(--ink)', color:'#FFF', fontFamily:'var(--font-sans)', fontSize:'clamp(7px,0.5vw,8.5px)', letterSpacing:'.04em' }}>{t}</span>)}
          </div>}
        </div>
      </div>
    </article>
  );
}

/* ──────────────────────────────────────── QUIMICO CARD (home preview) */
function QuimicoCardHome({ item, compact }) {
  return (
    <article className="hover-card" style={{
      borderRadius:8, background:'#FFF', overflow:'hidden',
      display:'flex', flexDirection:'column', cursor:'default', alignSelf:'start'
    }}>
      <div style={{ background:'#F8F8F6', position:'relative', overflow:'hidden', aspectRatio:'4/5' }}>
        <img src={item.img} style={{ width:'100%', height:'100%', objectFit:'cover', position:'absolute', inset:0 }}loading="lazy" />
      </div>
      <div style={{ padding:'14px 18px 18px', display:'flex', flexDirection:'column', gap:6 }}>
        <div style={{ fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(12px,1vw,18px)', lineHeight:1.15, color:'var(--ink)' }}>{item.name}</div>
        <div style={{ fontFamily:'var(--font-sans)', fontWeight:400, fontSize:'clamp(10px,0.75vw,13px)', color:'rgba(0,0,0,0.5)' }}>{item.cat} · {item.code}</div>
        {!compact && <div style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--ink-2)', marginTop:4, lineHeight:1.4 }}>{item.spec}</div>}
        <a href={item.pdf} className="hover-cta arrow-cta" style={{ marginTop:10, display:'inline-flex', alignItems:'center', color:'var(--accent)', fontWeight:600, fontSize:11, textTransform:'uppercase', letterSpacing:'0.5px' }}>
          Ficha técnica <span className="arrow">→</span>
        </a>
      </div>
    </article>
  );
}

/* ──────────────────────────────────────── HERO CAROUSEL CARD */
const HERO_SLIDES = [
  {
    title: 'ALAMBRE MIG/MAG',
    cols: [
      { mat: 'Inoxidable',       grades: ['ER308L', 'ER316L', 'ER309L'] },
      { mat: 'Acero al carbono', grades: ['ER70S-6', 'E71T-1C', 'E71T-11'] },
      { mat: 'Aluminio',         grades: ['ER4043', 'ER5356'] },
    ],
    norma: 'AWS A5.9 · A5.18 · A5.10',
  },
  {
    title: 'ELECTRODOS REVESTIDOS',
    cols: [
      { mat: 'Inoxidable', grades: ['E308L', 'E309L', 'E316L'] },
      { mat: 'Carbono',    grades: ['E6013', 'E7018', 'E6010'] },
      { mat: 'Baja aleación', grades: ['E7016', 'E7018-1'] },
    ],
    norma: 'AWS A5.4 · A5.1 · A5.5',
  },
  {
    title: 'ELECTRODO DE TUNGSTENO',
    cols: [
      { mat: 'Lantanado WL-15',  grades: ['Dorado', 'Ø 1.6 · 2.4 · 3.2'] },
      { mat: 'Cerianizado WC-20', grades: ['Gris',  'Ø 1.6 · 2.4'] },
      { mat: 'Puro WP',          grades: ['Verde',  'Ø 1.6 · 2.4 · 3.2'] },
    ],
    norma: 'AWS A5.12',
  },
];

function HeroCarouselCard() {
  const [idx, setIdx] = useState(0);
  const total = HERO_SLIDES.length;

  useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % total), 5000);
    return () => clearInterval(t);
  }, [total]);

  const s = HERO_SLIDES[idx];

  return (
    <div className="hero-card-wrap" style={{ display:'flex', flexDirection:'column', gap:14 }}>
      <style>{`
        @keyframes konnenHeroSwap {
          0%   { opacity: 0; transform: translateY(2px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        .konnen-hero-swap { animation: konnenHeroSwap 380ms cubic-bezier(0.2, 0, 0, 1) both; }
      `}</style>

      {/* Eyebrow — FUERA de la card, sobre la foto */}
      <div style={{ color:'rgba(255,255,255,0.82)', fontFamily:'var(--font-sans)', fontWeight:400, fontSize:'clamp(11px,0.85vw,13px)', letterSpacing:'.18em', textTransform:'uppercase', padding:'0 2px' }}>
        Aporte de soldadura profesional
      </div>

      {/* Card exterior — glass, SIN borde remarcado. TAMAÑO FIJO entre slides */}
      <div style={{ borderRadius:10, background:'rgba(255,255,255,0.05)', backdropFilter:'blur(26px)', WebkitBackdropFilter:'blur(26px)', padding:'22px 22px 24px', display:'flex', flexDirection:'column', gap:28 }}>

        {/* Título + dashes carrusel — sin línea divisora, sin fondo propio */}
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, minHeight:36 }}>
          <span key={`title-${idx}`} className="konnen-hero-swap" style={{ color:'#FFF', fontFamily:'var(--font-sans)', fontWeight:400, fontSize:'clamp(22px,2.2vw,32px)', letterSpacing:'.01em', lineHeight:1 }}>{s.title}</span>
          <div role="tablist" aria-label="Carrusel de productos" style={{ display:'flex', gap:6 }}>
            {HERO_SLIDES.map((_, i) => (
              <button
                key={i}
                role="tab"
                aria-selected={i === idx}
                onClick={() => setIdx(i)}
                style={{ width: i === idx ? 18 : 10, height:2, padding:0, border:0, cursor:'pointer', background: i === idx ? '#FFF' : 'rgba(255,255,255,0.4)', transition:'all .25s ease' }}
              />
            ))}
          </div>
        </div>

        {/* Tabla REMARCADA — alto FIJO para que no cambie entre slides */}
        <div style={{ border:'1px solid rgba(255,255,255,0.22)', borderRadius:8, background:'rgba(255,255,255,0.03)', overflow:'hidden' }}>

          {/* Fila de materiales (header) — fondo levemente más claro, divisor inferior */}
          <div style={{ display:'grid', gridTemplateColumns:`repeat(${s.cols.length}, 1fr)`, background:'rgba(255,255,255,0.08)', borderBottom:'1px solid rgba(255,255,255,0.18)' }}>
            {s.cols.map((col, i) => (
              <div key={i} style={{
                padding:'14px 14px',
                borderRight: i < s.cols.length - 1 ? '1px solid rgba(255,255,255,0.14)' : 'none',
                textAlign:'center',
                color:'rgba(255,255,255,0.92)',
                fontSize:'clamp(11px,0.95vw,14px)',
                fontFamily:'var(--font-sans)',
                fontWeight:400,
                lineHeight:1.2,
                minHeight:'2.4em',
                display:'flex',
                alignItems:'center',
                justifyContent:'center',
              }}>
                <span key={`mat-${idx}-${i}`} className="konnen-hero-swap">{col.mat}</span>
              </div>
            ))}
          </div>

          {/* Fila de códigos — minHeight fijo para que la altura no varíe entre slides */}
          <div className="hero-card-codes-row" style={{ display:'grid', gridTemplateColumns:`repeat(${s.cols.length}, 1fr)`, minHeight:120 }}>
            {s.cols.map((col, i) => (
              <div key={i} style={{
                padding:'18px 14px 22px',
                borderRight: i < s.cols.length - 1 ? '1px solid rgba(255,255,255,0.14)' : 'none',
                textAlign:'center',
              }}>
                {col.grades.map((g, j) => (
                  <div key={`g-${idx}-${i}-${j}`} className="konnen-hero-swap" style={{ color:'rgba(255,255,255,0.82)', fontSize:'clamp(11px,0.9vw,13px)', fontWeight:300, fontFamily:'var(--font-sans)', letterSpacing:'.01em', lineHeight:1.9 }}>
                    {g}
                  </div>
                ))}
              </div>
            ))}
          </div>

          {/* Norma — footer, fondo levemente más claro como el header, divisor superior */}
          <div style={{ borderTop:'1px solid rgba(255,255,255,0.18)', background:'rgba(255,255,255,0.08)', padding:'14px 20px', textAlign:'center' }}>
            <span key={`norma-${idx}`} className="konnen-hero-swap" style={{ color:'#FFF', fontFamily:'var(--font-sans)', fontWeight:500, fontSize:'clamp(13px,1.05vw,16px)', letterSpacing:'.04em' }}>
              {s.norma}
            </span>
          </div>
        </div>
      </div>

      {/* Botones — Ficha técnica usa el toggle HAS_PDF_FICHAS (igual que en la página de producto);
          el segundo botón abre WhatsApp de contacto. */}
      <div style={{ display:'flex', gap:10 }}>
        {HAS_PDF_FICHAS ? (
          <button className="hover-cta arrow-cta btn-border-cta" style={{ flex:1, height:50, borderRadius:8, background:'rgba(255,255,255,0.10)', border:'none', color:'rgba(255,255,255,0.92)', fontSize:12, fontWeight:300, fontFamily:'var(--font-sans)' }}>Ficha técnica <span className="arrow">→</span></button>
        ) : (
          <button disabled title="Próximamente" style={{ flex:1, height:50, borderRadius:8, background:'rgba(255,255,255,0.06)', border:'none', color:'rgba(255,255,255,0.55)', fontSize:12, fontWeight:300, fontFamily:'var(--font-sans)', cursor:'default', display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8 }}>Ficha técnica <span style={{ fontStyle:'italic', fontSize:11, opacity:.85 }}>· próximamente</span></button>
        )}
        <button onClick={() => window.open(KONNEN_WA,'_blank','noopener')} className="hover-cta arrow-cta btn-white-cta" style={{ flex:1, height:50, borderRadius:8, background:'#FFF', color:'var(--accent)', fontWeight:400, fontSize:12, fontFamily:'var(--font-sans)', cursor:'pointer', border:'none' }}>Certificados de calidad <span className="arrow">→</span></button>
      </div>
    </div>
  );
}

/* ──────────────────────────────────────── HOME VIEW */
function HomeView({ onSelectProduct, onNavigateQuimicos }) {
  const [slide, setSlide] = useState(0);
  const [tungstenoHovered, setTungstenoHovered] = useState(false);
  useEffect(() => {
    const t = setInterval(() => setSlide(s => (s + 1) % 4), 5500);
    return () => clearInterval(t);
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      const titles = document.querySelectorAll('.alianzas-step-title');
      const activeTop = window.innerHeight * 0.30;
      const activeBottom = window.innerHeight * 0.55;
      
      titles.forEach(title => {
        const stepContainer = title.closest('.alianzas-step');
        if (!stepContainer) return;
        
        const rect = title.getBoundingClientRect();
        // Se ilumina al pasar por la franja (<= 55% de la pantalla) y queda encendido
        if (rect.top <= activeBottom) {
          stepContainer.classList.add('is-active');
        }
      });
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    handleScroll();

    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <main>
      {/* HERO */}
      <section id="top" className="hero-section" style={{ position:'relative', width:'100%', minHeight:'100vh', display:'flex', flexDirection:'column' }}>
        <picture style={{ position:'absolute', inset:0, width:'100%', height:'100%', display:'block' }}>
          <source media="(max-width: 600px)" srcSet={A.welderMobile} />
          <img src={A.welder} className="hero-bg-img" style={{ width:'100%', height:'100%', objectFit:'cover' }} alt="Konnen" />
        </picture>
        <div className="hero-overlay" style={{ position:'absolute', inset:0, background:'rgba(0,0,0,0.35)' }}/>
        {/* Degradé transparente→negro desde "al costo que tu" (~58%) hasta casi el final (~90%) */}
        <div className="hero-gradient" style={{ position:'absolute', inset:0, background:'linear-gradient(to bottom, transparent 0%, transparent 56%, rgba(0,0,0,0.55) 72%, rgba(0,0,0,0.88) 88%, rgba(0,0,0,0.94) 100%)', pointerEvents:'none' }}/>
        <div className="hero-grid" style={{ position:'relative', zIndex:1, flex:1, display:'grid', gridTemplateColumns:'3fr 2fr', columnGap:56, padding:'clamp(100px,20vh,290px) 4.6vw 10vh', alignItems:'flex-end' }}>
          <div>
            <div className="hero-logo-mobile" style={{ display:'none' }}>
              <img src={A.logoNeg} alt="Konnen" style={{ height:'clamp(36px,5.5vw,54px)', width:'auto', objectFit:'contain' }}loading="lazy" />
            </div>
            {/* Desktop: 4 líneas */}
            <h1 className="hero-h1 hero-h1-desktop" style={{ margin:0, fontFamily:'var(--font-sans)', fontSize:'clamp(33px,3.9vw,78px)', lineHeight:1.06, color:'#FFF' }}>
              <span style={{ fontWeight:100 }}>El rendimiento que</span><br/>
              <span style={{ fontWeight:100 }}>tu industria demanda,</span><br/>
              <span style={{ fontWeight:800 }}>al costo que tu</span><br/>
              <span style={{ fontWeight:800 }}>negocio necesita.</span>
            </h1>
            {/* Mobile: 6 líneas, corte diferente — protagonista */}
            <h1 className="hero-h1 hero-h1-mobile" aria-hidden="true" style={{ margin:0, fontFamily:'var(--font-sans)', lineHeight:1.06, color:'#FFF' }}>
              <span style={{ fontWeight:100 }}>el rendimiento</span><br/>
              <span style={{ fontWeight:100 }}>que tu industria</span><br/>
              <span style={{ fontWeight:100 }}>demanda</span><br/>
              <span style={{ fontWeight:800 }}>al costo que</span><br/>
              <span style={{ fontWeight:800 }}>tu negocio</span><br/>
              <span style={{ fontWeight:800 }}>necesita</span>
            </h1>
            <p className="hero-subtitle-tablet" style={{ margin:0, fontFamily:'var(--font-sans)' }}>
              Konnen desarrolla productos junto a fabricantes líderes para potenciar la productividad y competitividad.
            </p>
            <div className="hero-cta-tablet" style={{ display:'none' }}>
              <button style={{ padding:'14px 24px', borderRadius:8, background:'rgba(255,255,255,0.12)', border:'1px solid rgba(255,255,255,0.28)', color:'rgba(255,255,255,0.9)', fontSize:14, fontWeight:300, fontFamily:'var(--font-sans)', cursor:'pointer' }}>Ficha técnica →</button>
              <button style={{ padding:'14px 24px', borderRadius:8, background:'#FFF', border:'none', color:'var(--accent)', fontSize:14, fontWeight:500, fontFamily:'var(--font-sans)', cursor:'pointer' }}>Certificados de calidad →</button>
            </div>
          </div>
          <HeroCarouselCard/>
        </div>
      </section>

      {/* ALIANZAS GLOBALES */}
      <section id="alianzas" className="alianzas-section" style={{ background:'#000', color:'#FFF', padding:'160px 4.6vw 120px' }}>
        <div className="alianzas-grid" style={{ maxWidth:1600, margin:'0 auto', display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:'100px' }}>

          {/* LEFT */}
          <div>
            <p className="alianzas-intro-text" style={{ fontSize:'clamp(20px,2vw,26px)', lineHeight:1.4, fontWeight:300, marginBottom:100, maxWidth:600, fontFamily:'var(--font-sans)', color:'rgba(255,255,255,0.92)' }}>
              <span style={{ color:'var(--accent)', fontWeight:400 }}>Konnen</span> desarrolla productos junto a fabricantes líderes para potenciar la productividad y competitividad.
            </p>

            {/* Steps — number + red dot + gradient connecting line */}
            <div style={{ display:'flex', flexDirection:'column' }}>
              {[
                { num:'01', title:'Identificación de necesidades', body:'Atendemos problemas reales de la industria.' },
                { num:'02', title:'Exploración global',            body:'Relevamos fabricantes mundiales y realizamos auditorías presenciales.' },
                { num:'03', title:'Validación técnica',            body:'Ensayamos productos en laboratorio y en condiciones reales de trabajo.' },
                { num:'04', title:'Continuidad garantizada',       body:'No desarrollamos proveedores, sino socios estratégicos.' },
              ].map((s, idx, arr) => (
                <div key={s.num} className="alianzas-step" style={{ display:'flex', gap:28, alignItems:'flex-start' }}>
                  <div className="step-num" style={{ fontSize:80, fontWeight:400, color:'rgba(255,255,255,0.10)', lineHeight:1, flexShrink:0, width:96, textAlign:'right', fontFamily:'var(--font-sans)' }}>{s.num}</div>
                  <div style={{ display:'flex', flexDirection:'column', alignItems:'center', flexShrink:0, alignSelf:'stretch' }}>
                    <div className="alianzas-red-dot-wrapper" style={{ width:17, height:17, borderRadius:'50%', background:'rgba(229,225,218,0.09)', border:'1px solid rgba(255,255,255,0.22)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:4 }}>
                      <div style={{ width:7, height:7, borderRadius:'50%', background:'#E20E18' }}/>
                    </div>
                    {idx < arr.length - 1 && (
                      <div style={{ width:1, flex:1, minHeight:60, background:'linear-gradient(to bottom, rgba(255,255,255,0.21), rgba(255,255,255,0.02))' }}/>
                    )}
                  </div>
                  <div style={{ paddingTop:4, paddingBottom: idx < arr.length - 1 ? 80 : 0, flex:1 }}>
                    <h3 className="alianzas-step-title" style={{ fontSize:'clamp(18px,1.8vw,28px)', margin:'0 0 12px', fontWeight:500, lineHeight:1.15 }}>{s.title}</h3>
                    <p style={{ color:'rgba(255,255,255,0.55)', margin:0, fontSize:15, lineHeight:1.65, maxWidth:400 }}>{s.body}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT — sticky title, only sticky within this section */}
          <div className="alianzas-right-col" style={{ position:'relative' }}>
            <div style={{ position:'sticky', top:'40vh', textAlign:'right' }}>
              <h2 className="alianzas-heading" style={{ fontSize:'clamp(24px,2.8vw,37px)', fontWeight:700, margin:0, lineHeight:1.1, letterSpacing:'-0.02em' }}>
                Alianzas globales,<br/><strong>que potencian<br/>la industria nacional.</strong>
              </h2>
            </div>
          </div>

        </div>
      </section>

      {/* RENDIMIENTO INTELIGENTE — same section flow, no eyebrow, no top border */}
      <section style={{ background:'#000', color:'#FFF', padding:'0 4.6vw 160px' }}>
        <div style={{ maxWidth:1600, margin:'0 auto' }}>
          <div className="rendimiento-grid" style={{ display:'grid', gridTemplateColumns:'2fr 0.8fr', gap:40, alignItems:'center' }}>
            <div className="rendimiento-text" style={{ paddingLeft:100 }}>
              <p style={{ fontSize:'clamp(31px,3.6vw,50px)', color:'#FAFAFA', fontWeight:700, margin:0, lineHeight:1.15, letterSpacing:'-0.015em', fontFamily:'var(--font-sans)' }}>
                <span style={{ display:'block', fontWeight:300, color:'rgba(255,255,255,0.55)' }}>Rendimiento real.</span>
                <span style={{ display:'block', fontWeight:300, color:'rgba(255,255,255,0.55)' }}>Calidad industrial.</span>
                <span style={{ display:'block', fontWeight:700, color:'#FAFAFA' }}>Rentabilidad inteligente.</span>
              </p>
            </div>
            <div className="rendimiento-img" style={{ display:'flex', alignItems:'center', justifyContent:'center' }}>
              <img src={A.smartPerf} alt="Smart Performance" className="rendimiento-smart-img" style={{ height:'calc(clamp(31px,3.6vw,50px) * 1.15 * 3)', width:'auto', maxWidth:'100%', objectFit:'contain', opacity:.92 }}loading="lazy" />
            </div>
          </div>
        </div>
      </section>

      {/* CANALES — 3ª sección */}
      <section id="cadena" style={{ background:'var(--bg)', padding:'120px 4.6vw' }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <div className="canales-header" style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', borderBottom:'1px solid var(--line)', paddingBottom:48, marginBottom:56, gap:40 }}>
            <h2 style={{ fontSize:'clamp(22px,2.8vw,36px)', margin:0, lineHeight:1.2, fontWeight:400, fontFamily:'var(--font-sans)' }}>
              Menos intermediarios,<br/><strong>más competitividad para tu negocio.</strong>
            </h2>
            <p style={{ margin:0, textAlign:'right', color:'var(--ink-2)', fontSize:15, lineHeight:1.65, fontFamily:'var(--font-sans)' }}>
              Confiamos en plataformas hechas para uso<br/>industrial, con asesoramiento técnico personalizado,<br/>y capacidad de cumplir consistentemente.
            </p>
          </div>
          <div className="cadena-partners" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
            <button className="hover-card" onClick={() => window.open('https://www.famiq.com.ar/producto?nombreEs=*&caracteristica_marca=konnen&tipoCatalogo=normal','_blank')} style={{ background:'#E5E1DA', padding:60, borderRadius:8, display:'flex', flexDirection:'column', alignItems:'flex-start', border:'none', cursor:'pointer', textAlign:'left', width:'100%' }}>
              <img src={A.famiq} style={{ height:60, width:'auto', marginBottom:40 }} alt="Famiq"loading="lazy" />
              <p style={{ margin:'0 0 40px', color:'var(--ink-2)', lineHeight:1.65, fontFamily:'var(--font-sans)' }}>Líder en el abastecimiento de productos de acero inoxidable para la industria.</p>
              <span className="arrow-cta" style={{ alignSelf:'flex-start', color:'var(--accent)', fontSize:14, fontWeight:600, fontFamily:'var(--font-sans)', letterSpacing:'.02em', marginTop:'auto', display:'inline-flex', alignItems:'center' }}>Comprar en Famiq <span className="arrow" style={{ display:'inline-block', transition:'transform 0.28s cubic-bezier(.2,.7,.2,1)', marginLeft:'.45em' }}>→</span></span>
            </button>
            <button className="hover-card" onClick={() => window.open('https://www.alaindustria.com/marca/konnen','_blank')} style={{ background:'#E5E1DA', padding:60, borderRadius:8, display:'flex', flexDirection:'column', alignItems:'flex-start', border:'none', cursor:'pointer', textAlign:'left', width:'100%' }}>
              <img src={A.ala} style={{ height:40, width:'auto', maxWidth:200, objectFit:'contain', display:'block', marginBottom:40 }} alt="alaindustria"loading="lazy" />
              <p style={{ margin:'0 0 40px', color:'var(--ink-2)', lineHeight:1.65, fontFamily:'var(--font-sans)' }}>Expertos en suministros industriales con cobertura nacional.</p>
              <span className="arrow-cta" style={{ alignSelf:'flex-start', color:'var(--accent)', fontSize:14, fontWeight:600, fontFamily:'var(--font-sans)', letterSpacing:'.02em', marginTop:'auto', display:'inline-flex', alignItems:'center' }}>Comprar en alaindustria <span className="arrow" style={{ display:'inline-block', transition:'transform 0.28s cubic-bezier(.2,.7,.2,1)', marginLeft:'.45em' }}>→</span></span>
            </button>
          </div>
        </div>
      </section>

      {/* PRODUCTOS — 3 filas: Alambre · TIG · Electrodos+Químicos
          ⚠️ Cada fila comparte el mismo esqueleto 3fr/40px/2fr → ritmo vertical.
          La card doble-ancho de cada fila (Tungsteno en TIG, Químicos en Electrodos)
          usa aspectRatio 8/5 para igualar la altura de imagen con las cards 4/5 del bloque
          izquierdo (1fr · 4/5 ≈ 2fr · 8/5 = 1.25fr de alto en ambos casos). */}
      <section id="productos" style={{ background:'#E5E1DA', padding:'120px 4.6vw 100px' }}>
        <div style={{ maxWidth:1424, margin:'0 auto' }}>
          <h2 className="prod-main-heading" style={{ fontSize:'clamp(36px,5vw,72px)', fontWeight:700, marginBottom:60, letterSpacing:'-0.04em' }}>Productos</h2>

          {/* ════════ FILA 1 — ALAMBRE (sin cambios) ════════ */}
          <div className="prod-sub-heading" style={{ fontSize:48, fontWeight:700, marginBottom:18 }}>Alambre</div>
          <div className="prod-grid" style={{ display:'grid', gridTemplateColumns:'3fr 40px 2fr', gap:0 }}>
            <div style={{ display:'flex', flexDirection:'column' }}>
              <div style={{ fontSize:18, fontWeight:300, marginBottom:14, color:'var(--ink-2)' }}>Acero al carbono</div>
              <div className="carbon-steel-wires-grid" style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10, flex:1 }}>
                <ProdCard img={A.migCarbon} imgHover={A.migCarbonHover} title={"MIG/MAG\nMacizo"} norma="AWS A5.18" tags={['ER70S-6']} onSelect={() => onSelectProduct('MIG/MAG — Acero al carbono')}/>
                <ProdCard img={A.fcawNoGas} imgHover={A.migCarbonHover} title={"FCAW\nSin Gas"} norma="AWS A5.20" tags={['E71T-11']} onSelect={() => onSelectProduct('FCAW — Sin gas')}/>
                <ProdCard img={A.fcawFlux}  imgHover={A.migCarbonHover} title={"FCAW\nCon Gas"} norma="AWS A5.20" tags={['E71T-1C']} onSelect={() => onSelectProduct('FCAW — Con gas')}/>
              </div>
            </div>
            <div/>
            <div className="prod-fila1-right" style={{ display:'flex', flexDirection:'column' }}>
              <div className="tablet-prod-titles" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:14 }}>
                <div style={{ fontSize:18, fontWeight:300, color:'var(--ink-2)' }}>Inoxidable</div>
                <div style={{ fontSize:18, fontWeight:300, color:'var(--ink-2)' }}>Aluminio</div>
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, flex:1 }}>
                <ProdCard img={A.migInox} imgHover={A.migInoxHover} title={"MIG/MAG\nInoxidable"} norma="AWS A5.9"  tags={['ER308L','ER309L','ER310','ER312','ER316L']} onSelect={() => onSelectProduct('MIG/MAG — Acero inoxidable')}/>
                <ProdCard img={A.migAl}   imgHover={A.migAlHover}   title={"MIG\nAluminio"}       norma="AWS A5.10" tags={['ER4043','ER5356']}  onSelect={() => onSelectProduct('MIG — Aluminio')}/>
              </div>
            </div>
          </div>

          {/* ════════ FILA 2 — TIG (NUEVA): 3 Varillas (placeholder) + Tungsteno doble-ancho ════════
              Heading único "TIG" arriba (estilo Fila 1). Sub-labels de material por card en el bloque
              izquierdo. En el bloque derecho, sub-label "Tungsteno" + card doble-ancho — espeja la
              card de Químicos de la Fila 3 → crea una columna vertical de "cards anchas" muy limpia.
              Las 3 Varillas usan placeholderLabel hasta que el cliente entregue las fotos reales. */}
          <div className="prod-grid" style={{ display:'grid', gridTemplateColumns:'3fr 40px 2fr', gap:0, marginTop:60 }}>
            {/* LEFT: 3 Varillas TIG con foto pendiente */}
            <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
              <div style={{ fontSize:22, fontWeight:300, color:'var(--ink-2)', marginBottom:0, lineHeight:1.15 }}>Varillas</div>
              <div className="prod-sub-heading" style={{ fontSize:48, fontWeight:700, marginBottom:18, marginTop:'-0.18em' }}>TIG</div>
              <div className="tablet-prod-titles" style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10, marginBottom:14 }}>
                <div style={{ fontSize:18, fontWeight:300, color:'var(--ink-2)' }}>Acero al carbono</div>
                <div style={{ fontSize:18, fontWeight:300, color:'var(--ink-2)' }}>Inoxidable</div>
                <div style={{ fontSize:18, fontWeight:300, color:'var(--ink-2)' }}>Aluminio</div>
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10, flex:1 }}>
                <ProdCard img={A.tigCarbon} imgHover={A.tigCarbonHover} title={"Varilla\nCarbono"}    norma="AWS A5.18" tags={['ER70S-3']}                                  onSelect={() => onSelectProduct('Varilla TIG — Acero al carbono')}/>
                <ProdCard img={A.tigInox}   imgHover={A.tigInoxHover}   imgHoverPosition="center bottom" title={"Varilla\nInoxidable"} norma="AWS A5.9"  tags={['ER308L','ER309L','ER310','ER312','ER316L']} onSelect={() => onSelectProduct('Varilla TIG — Inox')}/>
                <ProdCard img={A.tigAlum}   imgHover={A.tigAlumHover}   title={"Varilla\nAluminio"}   norma="AWS A5.10" tags={['ER4043','ER5356']}                          onSelect={() => onSelectProduct('Varilla TIG — Aluminio')}/>
              </div>
            </div>

            <div/>

            {/* RIGHT: Tungsteno como card doble-ancho — mismo lenguaje visual que Químicos */}
            <div className="quimicos-col" style={{ display:'flex', flexDirection:'column', height:'100%' }}>
              <div style={{ fontSize:22, fontWeight:300, color:'var(--ink-2)', marginBottom:0, lineHeight:1.15 }}>Electrodos de</div>
              <div className="prod-sub-heading" style={{ fontSize:48, fontWeight:700, marginBottom:18, marginTop:'-0.18em' }}>Tungsteno</div>
              {/* spacer: iguala el alto del sub-labels row (Acero al carbono / Inox / Aluminio) del lado izquierdo */}
              <div className="tungsteno-spacer" style={{ height:36, flexShrink:0 }} aria-hidden="true"/>
              <article onClick={() => onSelectProduct('Electrodo de tungsteno')} className="hover-card quimicos-card tungsteno-card" style={{
                borderRadius:8, background:'#FFF', overflow:'hidden',
                display:'flex', flexDirection:'column', cursor:'pointer', flex:1, height:'100%'
              }} onMouseEnter={() => setTungstenoHovered(true)} onMouseLeave={() => setTungstenoHovered(false)}>
                <div className="quimicos-card-img" style={{ background:'#F8F8F6', position:'relative', overflow:'hidden', aspectRatio:'8/5' }}>
                  <img src={A.tungsteno} style={{ width:'100%', height:'100%', objectFit:'cover', position:'absolute', inset:0, transition:'opacity 0.35s' }}loading="lazy" />
                  {A.tungstenHover && <img src={A.tungstenHover} style={{ width:'100%', height:'100%', objectFit:'cover', position:'absolute', inset:0, opacity: tungstenoHovered ? 1 : 0, transition:'opacity 0.35s' }}loading="lazy" />}
                </div>
                <div style={{ padding:'12px 15px 15px', display:'flex', flexDirection:'column', gap:4 }}>
                  <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:10 }}>
                    <div style={{ fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(11px,0.95vw,17px)', lineHeight:1.15, color:'var(--ink)' }}>Electrodo de tungsteno</div>
                    <div style={{ fontFamily:'var(--font-sans)', fontWeight:400, fontSize:'clamp(10px,0.8vw,13px)', lineHeight:1.15, color:'rgba(0,0,0,0.5)', textAlign:'right', whiteSpace:'nowrap', flexShrink:0 }}>AWS A5.12</div>
                  </div>
                  <div className="prod-card-tags" style={{ display:'flex', flexWrap:'wrap', gap:3 }}>
                    {['WL-15','WC-20','WP'].map(t => (
                      <span key={t} style={{ padding:'2px 6px', borderRadius:3, background:'var(--ink)', color:'#FFF', fontFamily:'var(--font-sans)', fontSize:'clamp(7px,0.5vw,8.5px)', letterSpacing:'.04em' }}>{t}</span>
                    ))}
                  </div>
                </div>
              </article>
            </div>
          </div>

          {/* ════════ FILA 3 — ELECTRODOS + QUÍMICOS (Tungsteno migró a Fila 2) ════════
              Estructura idéntica a la original: bloque Electrodos en 3fr con grid 1fr/1fr/1fr
              (las 2 Revestidos viven en cols 1+2 — col 3 queda vacía intencionalmente para
              respetar el ancho de card establecido por Alambre y mantener la altura alineada
              con la card doble-ancho de Químicos en el bloque derecho). */}
          <div className="prod-grid" style={{ display:'grid', gridTemplateColumns:'3fr 40px 2fr', gap:0, marginTop:60 }}>
            {/* LEFT: Electrodos Revestidos (2 cards que ocupan todo el bloque de 3fr) */}
            <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
              <div style={{ fontSize:22, fontWeight:300, color:'var(--ink-2)', marginBottom:0, lineHeight:1.15 }}>Electrodos</div>
              <div className="prod-sub-heading" style={{ fontSize:48, fontWeight:700, marginBottom:18, marginTop:'-0.18em' }}>Revestidos</div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, flex:1 }}>
                <ProdCard img={A.revestInox}   imgHover={A.revestInoxHover}   title={"Acero\ninoxidable"} norma="AWS A5.4"  tags={['E308L','E309L','E312','E316L']}  onSelect={() => onSelectProduct('Revestidos — Inox')} imgAspectRatio="6/5"/>
                <ProdCard img={A.revestCarbon} imgHover={A.revestCarbonHover} title={"Acero al\ncarbono"}    norma="AWS A5.1"  tags={['E6013','E7018','E6010']}         onSelect={() => onSelectProduct('Revestidos — Acero al carbono')} imgAspectRatio="6/5"/>
              </div>
            </div>

            <div/>

            {/* RIGHT: Químicos — sin cambios respecto al diseño original.
                ⚠️ ALINEACIÓN DESKTOP — NO TOCAR sin verificar:
                  · quimicos-spacer height:58 iguala el alto del sub-row de
                    labels "Revestidos" de Electrodos → así el TOP de la card de
                    Químicos arranca al mismo Y que el top de las cards de Revestidos.
                  · aspectRatio:'8/5' iguala la altura de imagen con las cards de
                    Revestidos (4/5 pero 1/3 del ancho).
                  · NO uses marginTop:auto — empuja la card al bottom y
                    deja el spacer flotando, rompiendo la alineación.
                En tablet/mobile las reglas CSS de index.html sobrescriben
                spacer (display:none) and aspect-ratio (8/5 and 4/5). */}
            <div className="quimicos-col" style={{ display:'flex', flexDirection:'column', height:'100%' }}>
              <div className="prod-sub-heading" style={{ fontSize:48, fontWeight:700, marginBottom:18 }}>Químicos</div>
              <div className="quimicos-spacer" style={{ height:5, marginBottom:0 }} aria-hidden="true"/>
              <article onClick={onNavigateQuimicos} className="hover-card quimicos-card" style={{
                borderRadius:8, background:'#FFF', overflow:'hidden',
                display:'flex', flexDirection:'column', cursor:'pointer', alignSelf:'stretch', flex:1, height:'100%'
              }}>
                <div className="quimicos-card-img" style={{ background:'#F8F8F6', position:'relative', overflow:'hidden', aspectRatio:'8/5' }}>
                  <img src={A.quimicos2} style={{ width:'100%', height:'100%', objectFit:'cover', position:'absolute', inset:0 }}loading="lazy" />
                </div>
                <div style={{ padding:'12px 15px 15px', display:'flex', flexDirection:'column', gap:4 }}>
                  <div style={{ fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(11px,0.95vw,17px)', lineHeight:1.15, color:'var(--ink)' }}>Línea química</div>
                  <div className="prod-card-tags" style={{ display:'flex', flexWrap:'wrap', gap:3 }}>
                    {['Decapantes','Pasivantes y neutralizantes','Antiadherentes'].map(t => (
                      <span key={t} style={{ padding:'2px 6px', borderRadius:3, background:'var(--ink)', color:'#FFF', fontFamily:'var(--font-sans)', fontSize:'clamp(7px,0.5vw,8.5px)', letterSpacing:'.04em' }}>{t}</span>
                    ))}
                  </div>
                </div>
              </article>
            </div>
          </div>

          {/* CTA buttons — left aligned, white/red then text-only gray */}
          <div className="cta-flex" style={{ display:'flex', gap:24, marginTop:56, justifyContent:'flex-start', alignItems:'center' }}>
            <button className="hover-cta arrow-cta btn-white-cta" style={{ padding:'15px 28px', background:'#FFF', color:'var(--accent)', borderRadius:8, fontSize:13, fontWeight:500, fontFamily:'var(--font-sans)', border:'none' }}>Solicitar certificado de calidad <span className="arrow">→</span></button>
            <button className="hover-cta arrow-cta btn-text-cta" style={{ padding:'15px 4px', background:'transparent', color:'var(--ink-2)', border:'none', fontSize:13, fontWeight:400, fontFamily:'var(--font-sans)' }}>Descargar catálogo completo <span className="arrow">→</span></button>
          </div>
        </div>
      </section>

      {/* ACTUALIZÁ TU PROCESO */}
      <section id="contacto" style={{ background:'var(--bg)', borderTop:'none', padding:'120px 4.6vw 140px' }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <div className="contacto-grid" style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:100, alignItems:'center' }}>
            <div>
              <h2 className="contacto-heading" style={{ fontSize:'clamp(36px,4.5vw,60px)', fontWeight:800, margin:0, lineHeight:1.05 }}>
                <span style={{ fontWeight:100 }}>Actualizá</span><br/>
                <span style={{ fontWeight:100 }}>tu proceso.</span><br/>
                Programá<br/>
                una demo.
              </h2>
            </div>
            <div className="contacto-card" style={{ background:'#E5E1DA', borderRadius:8 }}>
              <p style={{ color:'var(--ink)', fontSize:'clamp(16px,1.3vw,20px)', fontWeight:700, lineHeight:1.4, margin:'0 0 20px' }}>
                Un asesor técnico va a tu empresa, lleva el producto y lo probamos juntos en condiciones reales.
              </p>
              <p style={{ color:'var(--ink-2)', fontSize:14, lineHeight:1.7, margin:'0 0 8px' }}>
                Sin cargo y sin compromiso de compra. Lo único que necesitamos es entender tu aplicación — el resto lo coordinamos nosotros.
              </p>
              <p style={{ color:'var(--ink-2)', fontSize:14, lineHeight:1.7, margin:0 }}>
                Dejá tus datos y reserva un lugar en la agenda de nuestros asesores técnicos.
              </p>
              <div style={{ height:1, background:'rgba(10,10,10,0.12)', margin:'40px 0 24px' }}/>
              <button onClick={() => window.open(KONNEN_WA,'_blank','noopener')} className="hover-cta arrow-cta btn-white-cta" style={{
                display:'flex', alignItems:'center', justifyContent:'space-between',
                width:'100%', padding:'16px 20px', background:'#FFF', borderRadius:8,
                border:'none', cursor:'pointer', fontFamily:'var(--font-sans)', marginBottom:4
              }}>
                <span><span style={{ color:'var(--accent)', fontWeight:700, fontSize:'clamp(12px, 3.2vw, 14px)' }}>Pedí una demo</span><span style={{ color:'var(--ink-2)', fontWeight:400, fontSize:'clamp(12px, 3.2vw, 14px)' }}> — últimos lugares de junio</span></span>
                <span className="arrow" style={{ color:'var(--accent)', fontSize:16 }}>→</span>
              </button>
              <button onClick={() => window.open(ALA_KONNEN,'_blank','noopener')} className="hover-cta arrow-cta btn-text-cta" style={{
                display:'flex', alignItems:'center', justifyContent:'space-between',
                width:'100%', padding:'14px 20px', background:'transparent',
                border:'none', cursor:'pointer', fontFamily:'var(--font-sans)'
              }}>
                <span style={{ color:'var(--ink-2)', fontWeight:400, fontSize:14 }}>Cotizá en alaindustria</span>
                <span className="arrow" style={{ color:'var(--ink-3)', fontSize:16 }}>→</span>
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ──────────────────────────────────────── SKU MATRIX */
function SkuMatrix({ skuList, tableType }) {
  const [copied, setCopied] = useState(null);
  if (!skuList || !skuList.length) return (
    <div style={{ padding:'14px 0', fontFamily:'var(--font-sans)', fontWeight:300, fontSize:'clamp(12px,0.95vw,14px)', color:'var(--ink)', opacity:.38 }}>
      — No disponible para esta clasificación
    </div>
  );

  const copy = (code) => {
    try { navigator.clipboard.writeText(code); } catch(e) {}
    setCopied(code);
    setTimeout(() => setCopied(null), 1600);
  };

  const cellStyle = (code) => ({
    padding:'14px 16px', textAlign:'center',
    fontFamily:'var(--font-sans)', fontWeight:300,
    fontSize:'clamp(12px,0.95vw,14px)', letterSpacing:'0.02em',
    cursor: code ? 'pointer' : 'default',
    color: code ? 'var(--ink)' : 'var(--ink-3)',
    transition:'background .15s',
  });

  if (tableType === 'alambre') {
    const diams = [...new Set(skuList.map(s => s.d))];
    const fmts  = [...new Set(skuList.map(s => s.f))];
    const lkp   = {};
    skuList.forEach(s => { lkp[s.d + '|' + s.f] = s.c; });
    return (
      <table style={{ width:'100%', borderCollapse:'collapse', fontFamily:'var(--font-sans)', fontSize:'clamp(12px,0.9vw,13px)' }}>
        <thead>
          <tr style={{ background:'rgba(10,10,10,0.05)' }}>
            <th style={{ padding:'14px 16px', textAlign:'left', fontWeight:500, fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--ink)', opacity:.55 }}>Diámetro</th>
            {fmts.map(f => <th key={f} style={{ padding:'14px 16px', textAlign:'center', fontWeight:500, fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--ink)', opacity:.55 }}>{f}</th>)}
          </tr>
        </thead>
        <tbody>
          {diams.map((d,i) => (
            <tr key={d} style={{ borderBottom:'1px solid rgba(10,10,10,0.05)' }}>
              <td style={{ padding:'14px 16px', fontWeight:500, fontSize:'clamp(12px,0.95vw,14px)', color:'var(--ink)' }}>{d}</td>
              {fmts.map(f => {
                const code = lkp[d + '|' + f];
                return (
                  <td key={f} onClick={() => code && copy(code)} style={{...cellStyle(code), background: copied===code ? 'rgba(226,14,24,0.06)' : 'transparent'}}>
                    {copied === code ? '✓ copiado' : (code || '—')}
                  </td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }

  // electrodo / tungsteno — sin columna de formato
  return (
    <table style={{ width:'100%', borderCollapse:'collapse', fontFamily:'var(--font-sans)', fontSize:'clamp(12px,0.9vw,13px)' }}>
      <thead>
        <tr style={{ background:'rgba(10,10,10,0.05)' }}>
          <th style={{ padding:'14px 16px', textAlign:'left', fontWeight:500, fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--ink)', opacity:.55 }}>Diámetro</th>
          <th style={{ padding:'14px 16px', textAlign:'center', fontWeight:500, fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--ink)', opacity:.55 }}>SKU</th>
        </tr>
      </thead>
      <tbody>
        {skuList.map((s,i) => (
          <tr key={s.d} onClick={() => copy(s.c)} style={{ borderBottom:'1px solid rgba(10,10,10,0.05)', cursor:'pointer' }}>
            <td style={{ padding:'14px 16px', fontWeight:500, fontSize:'clamp(12px,0.95vw,14px)', color:'var(--ink)' }}>{s.d}</td>
            <td style={{...cellStyle(s.c), background: copied===s.c ? 'rgba(226,14,24,0.06)' : 'transparent'}}>
              {copied === s.c ? '✓ copiado' : s.c}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

/* ──────────────────────────────────────── PRODUCT DETAIL VIEW */
function ProductView({ productId, onBack, onContact }) {
  const p = PRODUCTS_DATA[productId];
  const imgs = p ? (p.imgs && p.imgs.length ? p.imgs : [p.img]) : [];
  const [sel, setSel] = useState(0);
  const [imgIdx, setImgIdx] = useState(0);
  const [presIdx, setPresIdx] = useState(0);

  if (!p) return <div style={{padding:100,textAlign:'center',paddingTop:160}}>Producto no encontrado</div>;

  const si = Math.min(sel, p.tags.length - 1);
  // Algunos datos (corriente, polaridad, aleaciones) pueden variar según la calidad
  // seleccionada: aceptan un string (igual para todas) o un array indexado por calidad.
  const byQ = (v) => Array.isArray(v) ? v[Math.min(si, v.length - 1)] : v;
  const presentacionRows = p.presentacionTable || PRODUCT_PLACEHOLDER_PRESENTACION;
  const curPres = presentacionRows[Math.min(presIdx, presentacionRows.length - 1)];

  return (
    <div style={{ background:'var(--bg)', minHeight:'100vh' }}>

      {/* HERO */}
      <section style={{ borderBottom:'1px solid var(--line)', padding:'0 4.6vw', paddingTop:'clamp(72px,5.3vw,101.874px)', minHeight:'100vh', display:'flex', flexDirection:'column' }}>
        <div style={{ maxWidth:1280, margin:'0 auto', flex:1, display:'flex', flexDirection:'column' }}>
          <div className="product-detail-grid" style={{ display:'grid', gridTemplateColumns:'1.05fr 1fr', gap:'clamp(32px,4vw,72px)', alignItems:'stretch', paddingBottom:56, flex:1, paddingTop:32 }}>
            <div style={{ display:'flex', flexDirection:'column', justifyContent:'flex-end' }}>
              <h1 className="prod-detail-h1" style={{ margin:'0 0 20px', fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(28px,4vw,64px)', lineHeight:.95, letterSpacing:'-0.025em' }}>{productId}</h1>
              {/* ────────────────────────────────────────────────────────────────
                 BULLETS de descripción del producto.
                 Para EDITAR el texto: PRODUCTS_DATA[<nombre del producto>].bullets
                 (array de strings). Ver definición arriba en el archivo (~línea 305).
                 ──────────────────────────────────────────────────────────────── */}
              <ul className="prod-detail-lead" style={{ margin:0, padding:0, listStyle:'none', color:'var(--ink-2)', fontSize:'clamp(15px,1.1vw,18px)', lineHeight:1.55, maxWidth:560, display:'flex', flexDirection:'column', gap:0 }}>
                {(p.bullets || PRODUCT_PLACEHOLDER_BULLETS).map((b,i,arr) => (
                  <li key={i} style={{ display:'flex', alignItems:'flex-start', gap:18, padding:'14px 0', borderBottom:i < arr.length - 1 ? '1px solid rgba(10,10,10,0.07)' : 'none' }}>
                    <span aria-hidden="true" style={{ flexShrink:0, width:18, height:18, display:'inline-flex', alignItems:'center', justifyContent:'center', marginTop:'0.25em' }}>
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                        <path d="M2.2 7.4l3.2 3.2L11.8 4" stroke="var(--accent)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </span>
                    <span style={{ color:'var(--ink)', fontWeight:400 }}>{b}</span>
                  </li>
                ))}
              </ul>

              {/* CTAs minimalistas — solo texto + flecha, debajo de los bullets.
                  paddingLeft 36px = icono check (18) + gap (18) para alinear con el texto del bullet */}
              <div className="prod-cotizar-row" style={{ display:'flex', flexWrap:'wrap', gap:'clamp(24px,2.8vw,44px)', marginTop:32, paddingLeft:36 }}>
                {p.linkAla && (
                  <a href={p.linkAla} target="_blank" rel="noopener noreferrer" className="hover-cta arrow-cta btn-text-cta" style={{ display:'inline-flex', alignItems:'center', color:'var(--ink)', fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(17px,1.3vw,22px)', letterSpacing:'.005em' }}>
                    Cotizar en alaindustria <span className="arrow">→</span>
                  </a>
                )}
                {p.linkFamiq && (
                  <a href={p.linkFamiq} target="_blank" rel="noopener noreferrer" className="hover-cta arrow-cta btn-text-cta" style={{ display:'inline-flex', alignItems:'center', color:'var(--ink)', fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(17px,1.3vw,22px)', letterSpacing:'.005em' }}>
                    Cotizar en Famiq <span className="arrow">→</span>
                  </a>
                )}
              </div>
            </div>

            {/* Main image — carousel */}
            <div className="product-img-col" style={{ borderRadius:8, overflow:'hidden', background:'#D6D6D2', position:'relative', minHeight:320, alignSelf:'stretch' }}>
              {imgs.map((src, i) => (
                <img key={src} src={src} alt={productId} style={{ width:'100%', height:'100%', objectFit:'cover', position:'absolute', inset:0, opacity: i === imgIdx ? 1 : 0, transition:'opacity 0.45s ease' }}loading="lazy" />
              ))}
              {imgs.length > 1 && (
                <>
                  <button onClick={() => setImgIdx(i => (i - 1 + imgs.length) % imgs.length)} style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', width:36, height:36, borderRadius:'50%', background:'rgba(0,0,0,0.35)', border:'none', color:'#FFF', fontSize:16, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', zIndex:2 }}>‹</button>
                  <button onClick={() => setImgIdx(i => (i + 1) % imgs.length)} style={{ position:'absolute', right:12, top:'50%', transform:'translateY(-50%)', width:36, height:36, borderRadius:'50%', background:'rgba(0,0,0,0.35)', border:'none', color:'#FFF', fontSize:16, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', zIndex:2 }}>›</button>
                  <div style={{ position:'absolute', bottom:12, left:'50%', transform:'translateX(-50%)', display:'flex', gap:6, zIndex:2 }}>
                    {imgs.map((_,i) => (
                      <button key={i} onClick={() => setImgIdx(i)} style={{ width:20, height:2, padding:0, border:0, cursor:'pointer', background: i===imgIdx ? '#FFF' : 'rgba(255,255,255,0.4)', transition:'background .25s' }}/>
                    ))}
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* DATOS TÉCNICOS */}
      <section className="datos-section" style={{ background:'rgb(235,231,224)', padding:'clamp(40px,6vw,96px) 4.6vw clamp(56px,7vw,120px)' }}>
        <div className="datos-section-inner" style={{ maxWidth:1280, margin:'0 auto' }}>
          {/* Selector de calidad — ARRIBA de "Datos técnicos". Cambia los datos
              que varían por calidad (corriente, polaridad, química, aleaciones, SKUs). */}
          {p.tags.length > 0 && (
            <div className="datos-quality-select" style={{ marginBottom:'clamp(24px,3vw,40px)' }}>
              <div style={{ fontFamily:'var(--font-sans)', fontWeight:400, fontSize:11, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--ink)', opacity:.55, marginBottom:14 }}>Calidad</div>
              <div className="datos-tags-row" style={{ display:'flex', gap:10, flexWrap:'wrap' }}>
                {p.tags.map((t,i) => (
                  <button key={t} onClick={() => setSel(i)} className="quality-button" style={{
                    padding:'8px 18px', borderRadius:2,
                    background: i===si ? 'var(--ink)' : 'transparent',
                    border:`1px solid ${i===si ? 'var(--ink)' : 'rgba(10,10,10,0.30)'}`,
                    color: i===si ? '#FAFAFA' : 'var(--ink)',
                    fontFamily:'var(--font-sans)', fontWeight:700, fontSize:12, letterSpacing:'.04em', cursor:'pointer',
                    transition:'all .25s'
                  }}>{t}</button>
                ))}
              </div>
            </div>
          )}
          <div className="datos-header" style={{ display:'flex', alignItems:'stretch', marginBottom:36, flexWrap:'wrap', gap:0 }}>
            <div className="datos-header-title" style={{ minWidth:160, paddingRight:'clamp(32px,4vw,64px)', display:'flex', alignItems:'center', flexShrink:0 }}>
              <div style={{ fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(22px,2.8vw,36px)', lineHeight:.92, letterSpacing:'-0.035em' }}>Datos<br/>técnicos.</div>
            </div>
            <div className="datos-fields-col" style={{ display:'flex', flex:1, flexWrap:'wrap' }}>
              {[
                {lbl:'Norma',        val:p.norma},
                {lbl:'Presentación', val:p.presentacion},
                {lbl:'Diámetros',    val:p.diametros},
                ...(p.largo ? [{lbl:'Largo', val:p.largo}] : []),
                ...(p.tipo  ? [{lbl:'Tipo',  val:p.tipo}]  : []),
                {lbl:'Corriente y polaridad', val:byQ(p.corriente) || PRODUCT_PLACEHOLDER_CORRIENTE},
                {lbl:'Gas protección', val:p.gases && p.gases.length > 0 ? p.gases.join(' / ') : '—'},
              ].map(({lbl,val}) => (
                <React.Fragment key={lbl}>
                  <div className="datos-header-line" style={{ width:1, background:'rgba(10,10,10,0.22)', flexShrink:0, alignSelf:'stretch' }}/>
                  <div className="datos-header-cell" style={{ padding:'6px 16px', flex:'1 1 120px', minWidth:0, display:'flex', flexDirection:'var(--datos-cell-flex, column)', justifyContent:'flex-start' }}>
                    <div style={{ fontFamily:'var(--font-sans)', fontWeight:400, fontSize:9.5, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--ink)', opacity:.55, marginBottom:'var(--datos-cell-margin, 6px)' }}>{lbl}</div>
                    <div style={{ fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(12px,1.1vw,16px)', letterSpacing:'-0.015em', overflowWrap:'break-word', minWidth:0 }}>{typeof val === 'string' ? val.split(/([|/])/).map((s, i) => {
                      // Separadores | y / con espacios alrededor (permiten corte de l\u00EDnea)
                      if (i % 2 !== 0) return ' ' + s + ' ';
                      // Tokens cortos (\u00D8 0.9, 15 Kg, AWS A5.9) van pegados con espacio duro;
                      // frases largas (Tubular autoprotegido, CC \u00B7 Electrodo +) cortan normal.
                      const t = s.trim().replace(/-/g, '\u2011');
                      return t.length <= 9 ? t.replace(/ /g, '\u00A0') : t;
                    }).join('') : val}</div>
                  </div>
                </React.Fragment>
              ))}
            </div>
          </div>

          <div className="datos-divider-line" style={{ height:1, background:'rgba(10,10,10,0.18)', marginBottom:28 }}/>

          <div className="datos-main-rows" style={{ display:'flex', flexDirection:'column', gap:'var(--datos-rows-gap, 40px)' }}>
            {/* Posiciones */}
            <div className="datos-row" style={{ display:'flex', alignItems:'center', gap:'var(--datos-row-gap, 40px)' }}>
              <div className="datos-row-label-col" style={{ width:160, flexShrink:0 }}>
                <div className="datos-label" style={{ fontFamily:'var(--font-sans)', fontWeight:400, fontSize:11, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--ink)', opacity:.55, lineHeight:1.5 }}>Posiciones<br/>de soldadura</div>
              </div>
              <div className="datos-row-table" style={{ flex:1, display:'flex', alignItems:'center', gap:12, flexWrap:'wrap' }}>
                {(Array.isArray(p.posiciones[0]) ? p.posiciones[Math.min(si, p.posiciones.length-1)] : p.posiciones).map((pos,i) => (
                  <div key={pos} title={pos} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:8 }}>
                    {WELD_ICONS[pos] ? <img src={WELD_ICONS[pos]} alt={pos} style={{ height:44, width:'auto' }}loading="lazy" /> : <div style={{ width:44, height:44, background:'var(--ink)', borderRadius:4 }}loading="lazy" />}
                    <span style={{ fontSize:9, color:'var(--ink-3)', fontFamily:'var(--font-mono)', textAlign:'center', maxWidth:60 }}>{pos}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Composición química */}
            {p.quimica.length > 0 && (
              <div className="datos-row" style={{ display:'flex', alignItems:'flex-start', gap:'var(--datos-row-gap, 40px)' }}>
                <div className="datos-row-label-col" style={{ width:160, flexShrink:0, paddingTop:14 }}>
                  <div className="datos-label" style={{ fontFamily:'var(--font-sans)', fontWeight:400, fontSize:11, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--ink)', opacity:.55, lineHeight:1.5 }}>Composición<br/>química</div>
                </div>
                <div className="datos-row-table" style={{ flex:1 }}>
                  <div style={{ display:'flex', background:'rgba(10,10,10,0.05)' }}>
                    {p.quimica.map(q => <div key={q.label} style={{ flex:1, padding:'14px 16px', textAlign:'center', fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(13px,1.05vw,16px)' }}>{q.label}</div>)}
                  </div>
                  <div style={{ display:'flex' }}>
                    {p.quimica.map(q => <div key={q.label} style={{ flex:1, padding:'18px 16px 4px', textAlign:'center', fontFamily:'var(--font-sans)', fontWeight:400, fontSize:'clamp(13px,1.05vw,16px)', opacity:.72 }}>{q.vals[Math.min(si,q.vals.length-1)]}</div>)}
                  </div>
                </div>
              </div>
            )}

            {/* Aleaciones aplicables */}
            <div className="datos-row" style={{ display:'flex', alignItems:'flex-start', gap:'var(--datos-row-gap, 40px)' }}>
              <div className="datos-row-label-col" style={{ width:160, flexShrink:0, paddingTop:4 }}>
                <div className="datos-label" style={{ fontFamily:'var(--font-sans)', fontWeight:400, fontSize:11, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--ink)', opacity:.55, lineHeight:1.4 }}>Aleaciones<br/>aplicables</div>
              </div>
              <p className="datos-row-table" style={{ flex:1, margin:0, fontSize:15, lineHeight:1.7, color:'var(--ink-2)' }}>{byQ(p.aleaciones) || PRODUCT_PLACEHOLDER_ALEACIONES}</p>
            </div>

            {/* Presentación (Tabla) */}
            <div className="datos-row" style={{ display:'flex', alignItems:'flex-start', gap:'var(--datos-row-gap, 40px)' }}>
              <div className="datos-row-label-col" style={{ width:160, flexShrink:0, paddingTop:14 }}>
                <div className="datos-label" style={{ fontFamily:'var(--font-sans)', fontWeight:400, fontSize:11, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--ink)', opacity:.55, lineHeight:1.5 }}>Presentación</div>
              </div>
              <div className="datos-row-table" style={{ flex:1, overflowX:'auto' }}>
                {p.tableType === 'alambre' ? (
                  /* ALAMBRES — carrete + packaging */
                  <table style={{ width:'100%', borderCollapse:'collapse', fontFamily:'var(--font-sans)', fontSize:'clamp(12px,1vw,14px)', textAlign:'center' }}>
                    <thead>
                      <tr style={{ background:'rgba(10,10,10,0.05)', color:'var(--ink)' }}>
                        <th rowSpan="2" style={{ padding:'12px', textAlign:'left' }}>Formato</th>
                        <th colSpan="3" style={{ padding:'8px 12px', borderBottom:'1px solid rgba(10,10,10,0.1)' }}>Carrete</th>
                        <th colSpan="3" style={{ padding:'8px 12px', borderBottom:'1px solid rgba(10,10,10,0.1)' }}>Packaging</th>
                      </tr>
                      <tr style={{ background:'rgba(10,10,10,0.03)', color:'var(--ink-2)', fontSize:11, fontWeight:500, letterSpacing:'.02em' }}>
                        <th style={{ padding:'8px', fontWeight:500 }}>Ø Int.</th>
                        <th style={{ padding:'8px', fontWeight:500 }}>Ø Ext.</th>
                        <th style={{ padding:'8px', fontWeight:500 }}>Ancho</th>
                        <th style={{ padding:'8px', fontWeight:500 }}>Alto</th>
                        <th style={{ padding:'8px', fontWeight:500 }}>Ancho</th>
                        <th style={{ padding:'8px', fontWeight:500 }}>Prof.</th>
                      </tr>
                    </thead>
                    <tbody>
                      {presentacionRows.map((row, i) => (
                        <tr key={i} style={{ borderBottom:'1px solid rgba(10,10,10,0.05)' }}>
                          <td style={{ padding:'12px', fontWeight:600, textAlign:'left' }}>{row.formato}</td>
                          <td style={{ padding:'12px' }}>{row.carrete.di}</td>
                          <td style={{ padding:'12px' }}>{row.carrete.de}</td>
                          <td style={{ padding:'12px' }}>{row.carrete.ancho}</td>
                          <td style={{ padding:'12px' }}>{row.packaging.alto}</td>
                          <td style={{ padding:'12px' }}>{row.packaging.ancho}</td>
                          <td style={{ padding:'12px' }}>{row.packaging.prof}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                ) : p.tableType === 'electrodo' ? (
                  /* ELECTRODOS REVESTIDOS — diámetro + largo + cajas */
                  <table style={{ width:'100%', borderCollapse:'collapse', fontFamily:'var(--font-sans)', fontSize:'clamp(12px,1vw,14px)', textAlign:'center' }}>
                    <thead>
                      <tr style={{ background:'rgba(10,10,10,0.05)', color:'var(--ink)' }}>
                        <th rowSpan="2" style={{ padding:'12px', textAlign:'left' }}>Diámetro</th>
                        {presentacionRows[0] && presentacionRows[0].largo && <th rowSpan="2" style={{ padding:'12px' }}>Largo</th>}
                        <th colSpan="3" style={{ padding:'8px 12px', borderBottom:'1px solid rgba(10,10,10,0.1)' }}>Caja unitaria</th>
                        <th colSpan="3" style={{ padding:'8px 12px', borderBottom:'1px solid rgba(10,10,10,0.1)' }}>Caja 5 kg</th>
                      </tr>
                      <tr style={{ background:'rgba(10,10,10,0.03)', color:'var(--ink-2)', fontSize:11, fontWeight:500, letterSpacing:'.02em' }}>
                        <th style={{ padding:'8px', fontWeight:500 }}>Alto</th>
                        <th style={{ padding:'8px', fontWeight:500 }}>Ancho</th>
                        <th style={{ padding:'8px', fontWeight:500 }}>Prof.</th>
                        <th style={{ padding:'8px', fontWeight:500 }}>Alto</th>
                        <th style={{ padding:'8px', fontWeight:500 }}>Ancho</th>
                        <th style={{ padding:'8px', fontWeight:500 }}>Prof.</th>
                      </tr>
                    </thead>
                    <tbody>
                      {presentacionRows.map((row, i) => (
                        <tr key={i} style={{ borderBottom:'1px solid rgba(10,10,10,0.05)' }}>
                          <td style={{ padding:'12px', fontWeight:600, textAlign:'left' }}>{row.diametro}</td>
                          {row.largo && <td style={{ padding:'12px' }}>{row.largo}</td>}
                          <td style={{ padding:'12px' }}>{row.cajaUnit.alto}</td>
                          <td style={{ padding:'12px' }}>{row.cajaUnit.ancho}</td>
                          <td style={{ padding:'12px' }}>{row.cajaUnit.prof}</td>
                          <td style={{ padding:'12px' }}>{row.caja5k.alto}</td>
                          <td style={{ padding:'12px' }}>{row.caja5k.ancho}</td>
                          <td style={{ padding:'12px' }}>{row.caja5k.prof}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                ) : p.tableType === 'tungsteno' ? (
                  /* TUNGSTENO — diámetro + largo + packaging */
                  <table style={{ width:'100%', borderCollapse:'collapse', fontFamily:'var(--font-sans)', fontSize:'clamp(12px,1vw,14px)', textAlign:'center' }}>
                    <thead>
                      <tr style={{ background:'rgba(10,10,10,0.05)', color:'var(--ink)', fontSize:11, fontWeight:500, letterSpacing:'.02em' }}>
                        <th style={{ padding:'12px', textAlign:'left', fontWeight:500 }}>Diámetro</th>
                        <th style={{ padding:'12px', fontWeight:500 }}>Largo</th>
                        <th style={{ padding:'12px', fontWeight:500 }}>Alto pkg.</th>
                        <th style={{ padding:'12px', fontWeight:500 }}>Ancho pkg.</th>
                        <th style={{ padding:'12px', fontWeight:500 }}>Prof. pkg.</th>
                      </tr>
                    </thead>
                    <tbody>
                      {presentacionRows.map((row, i) => (
                        <tr key={i} style={{ borderBottom:'1px solid rgba(10,10,10,0.05)' }}>
                          <td style={{ padding:'12px', fontWeight:600, textAlign:'left' }}>{row.diametro}</td>
                          <td style={{ padding:'12px' }}>{row.largo}</td>
                          <td style={{ padding:'12px' }}>{row.pkg.alto}</td>
                          <td style={{ padding:'12px' }}>{row.pkg.ancho}</td>
                          <td style={{ padding:'12px' }}>{row.pkg.prof}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                ) : p.tableType === 'varilla' ? (
                  /* VARILLAS TIG — diámetro + largo varilla + sección del paquete */
                  <table style={{ width:'100%', borderCollapse:'collapse', fontFamily:'var(--font-sans)', fontSize:'clamp(12px,1vw,14px)', textAlign:'center' }}>
                    <thead>
                      <tr style={{ background:'rgba(10,10,10,0.05)', color:'var(--ink)', fontSize:11, fontWeight:500, letterSpacing:'.02em' }}>
                        <th style={{ padding:'12px', textAlign:'left', fontWeight:500 }}>Diámetro</th>
                        <th style={{ padding:'12px', fontWeight:500 }}>Largo varilla</th>
                        <th style={{ padding:'12px', fontWeight:500 }}>Sección paquete</th>
                      </tr>
                    </thead>
                    <tbody>
                      {presentacionRows.map((row, i) => (
                        <tr key={i} style={{ borderBottom:'1px solid rgba(10,10,10,0.05)' }}>
                          <td style={{ padding:'12px', fontWeight:600, textAlign:'left' }}>{row.diametro}</td>
                          <td style={{ padding:'12px' }}>{row.largo}</td>
                          <td style={{ padding:'12px' }}>{row.secc}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                ) : null}
              </div>
            </div>

            {/* SKUs disponibles */}
            {p.skus && p.skus.some(a => a.length > 0) && (
              <div className="datos-row" style={{ display:'flex', alignItems:'flex-start', gap:'var(--datos-row-gap, 40px)' }}>
                <div style={{ width:160, flexShrink:0, paddingTop:14 }}>
                  <div className="datos-label" style={{ fontFamily:'var(--font-sans)', fontWeight:400, fontSize:11, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--ink)', opacity:.55, lineHeight:1.5 }}>
                    SKUs<br/>disponibles
                    <div style={{ marginTop:8, fontSize:10, opacity:.65, letterSpacing:'.04em', textTransform:'none', fontWeight:300 }}>Hacé clic para copiar</div>
                  </div>
                </div>
                <div className="datos-row-table" style={{ flex:1 }}>
                  <SkuMatrix skuList={p.skus[si]} tableType={p.tableType || 'alambre'} />
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* FICHAS TÉCNICAS */}
      <section style={{ background:'var(--dark-bg)', padding:'80px 4.6vw' }}>
        <div className="fichas-grid" style={{ maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 2fr', gap:80, alignItems:'start' }}>
          <div>
            <h2 style={{ margin:'0 0 20px', fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(28px,3.5vw,46px)', lineHeight:1, letterSpacing:'-0.03em', color:'#FAFAFA' }}>Fichas<br/>técnicas.</h2>
            <p style={{ color:'rgba(250,250,250,0.55)', fontSize:14, lineHeight:1.65, margin:0 }}>
              Composición química completa, propiedades mecánicas y procedimiento de soldadura recomendado para cada clasificación.
            </p>
          </div>
          <div>
            {/* Lista de fichas por calidad — PDFs reales pendientes (ver HAS_PDF_FICHAS) */}
            <div style={{ display:'flex', flexDirection:'column' }}>
              {p.tags.map((t, i, arr) => (
                <div key={i} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:24, padding:'20px 0', borderBottom:i < arr.length - 1 ? '1px solid rgba(250,250,250,0.10)' : 'none' }}>
                  <div style={{ color:'#FAFAFA', fontSize:15, fontWeight:500, letterSpacing:'.01em' }}>{t}</div>
                  <span style={{ color:'rgba(250,250,250,0.45)', fontSize:12, fontStyle:'italic', whiteSpace:'nowrap' }}>PDF próximamente</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding:'100px 4.6vw', borderBottom:'1px solid var(--line)' }}>
        <div className="cta-flex" style={{ maxWidth:1280, margin:'0 auto', display:'flex', alignItems:'center', justifyContent:'space-between', gap:48, flexWrap:'wrap' }}>
          <h2 style={{ margin:0, fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(28px,4.5vw,68px)', lineHeight:.95, letterSpacing:'-0.02em', maxWidth:760 }}>
            Probalo en tu planta,<br/>
            <span style={{ color:'var(--ink-2)', fontWeight:300 }}>pedinos una demo.</span>
          </h2>
          <button onClick={() => window.open(KONNEN_WA,'_blank','noopener')} className="hover-cta arrow-cta btn-border-cta" style={{ display:'inline-flex', alignItems:'center', background:'var(--accent)', color:'#FAFAFA', padding:'18px 32px', borderRadius:8, fontWeight:500, fontSize:15, fontFamily:'var(--font-sans)', border:'none', cursor:'pointer' }}>
            Contactar a Konnen <span className="arrow">→</span>
          </button>
        </div>
      </section>
    </div>
  );
}

function getChemicalSkus(code) {
  switch (code) {
    case 'QUIM-DECAP':
      return [
        { size: 'Pote 1.25 Kg', sku: '349807' },
        { size: 'Pote 2 Kg', sku: '333793' },
        { size: 'Pote 1.25 Kg (Pasta)', sku: '333705' }
      ];
    case 'QUIM-DECAP-L':
      return [
        { size: 'Bidón 5 L', sku: '350564' },
        { size: 'Bidón 30 L', sku: '350570' },
        { size: 'Bidón 5 Kg (Spray)', sku: '350566' },
        { size: 'Bidón 30 Kg (Spray)', sku: '350567' }
      ];
    case 'QUIM-PASIV':
      return [
        { size: 'Pote 1.25 Kg', sku: '349808' },
        { size: 'Pote 2 Kg', sku: '333794' }
      ];
    case 'QUIM-PASIV-L':
      return [
        { size: 'Bidón 5 L', sku: '350571' },
        { size: 'Bidón 30 L', sku: '350574' }
      ];
    case 'QUIM-PASIV-S':
      return [
        { size: 'Bidón 5 Kg', sku: '350568' }
      ];
    case 'QUIM-NEUT':
      return [
        { size: 'Pote 1.25 Kg (Gel)', sku: '350562' },
        { size: 'Bidón 5 L (Líquido)', sku: '350572' },
        { size: 'Bidón 30 L (Líquido)', sku: '350573' }
      ];
    case 'QUIM-ANTI':
      return [
        { size: 'Aerosol 420 ml', sku: '300691' }
      ];
    case 'QUIM-PAST':
      return [
        { size: 'Pote 500 g', sku: '335137' }
      ];
    case 'QUIM-BACK':
      return [
        { size: 'Pote 500 g', sku: '300706' }
      ];
    case 'QUIM-DETEC':
      return [
        { size: 'Frasco 50 ml (Molibdeno)', sku: '300698' },
        { size: 'Frasco 100 ml (Molibdeno)', sku: '300699' },
        { size: 'Frasco 500 ml (Ferrítico)', sku: '334996' }
      ];
    case 'QUIM-PULI':
      return [
        { size: 'Amarilla Paso 1 (1.25 kg)', sku: '345739' },
        { size: 'Rosa Paso 2 (1.25 kg)', sku: '345752' },
        { size: 'Blanca Paso 3 (1.25 kg)', sku: '345753' },
        { size: 'Pasta Fluida (500 ml)', sku: '338874' }
      ];
    case 'QUIM-LIMPI':
      return [
        { size: 'Rociador 500 ml', sku: '336400' },
        { size: 'Refil 500 ml', sku: '300701' },
        { size: 'Bidón 5 L', sku: '338524' }
      ];
    default:
      return [];
  }
}

/* ──────────────────────────────────────── QUIMICOS VIEW */
function QuimicosView({ onBack, onContact }) {
  const [expanded, setExpanded] = useState({});
  const toggleExpand = (code) => {
    setExpanded(prev => ({ ...prev, [code]: !prev[code] }));
  };

  const sections = [
    {
      id: 'decapantes',
      title: 'Decapantes',
      app: 'Aceros Inoxidables austeníticos y martensíticos.',
      desc: 'El decapado remueve la superficie empobrecida en cromo que resulta de soldaduras, cortes o tratamientos térmicos. La zona desmejorada es removida por la corrosión controlada que efectúa el decapante, dejando la superficie limpia y preparada para la pasivación.',
      ventajas: ['Formulación sin cloruros','Cumple con la norma ASTM A-380','No ataca el metal base','No desprende vapores irritantes','No presenta peligros por inflamabilidad o explosión'],
      img: 'assets/hero_shot_for_this_two_202606171649.webp'
    },
    {
      id: 'pasivantes',
      title: 'Pasivantes',
      app: 'Aceros Inoxidables.',
      desc: 'El pasivante regenera inmediatamente la película de óxido de cromo protectora, aumentando la resistencia de la aleación a la corrosión. Puede utilizarse también como descontaminante y desoxidante frente a contaminaciones ferrosas.',
      ventajas: ['Cumple con la norma ASTM A-967','Favorece la regeneración natural de la película pasiva','Formulación libre de cloruros que no altera el material'],
      img: 'assets/hero_shot_for_this_two_202606171649.webp'
    },
    {
      id: 'neutralizantes',
      title: 'Neutralizantes',
      app: 'Neutralización de efluentes y residuos ácidos.',
      desc: 'Recomendado para neutralizar los residuos ácidos generados en el decapado. Elimina la acidez de la superficie y precipita el fluoruro soluble y los metales pesados, facilitando el cumplimiento ambiental en el descarte de enjuagues.',
      ventajas: ['Elimina la acidez residual en la pieza','Precipita el fluoruro soluble y metales pesados','Facilita la disposición de efluentes cloacales'],
      img: 'assets/hero_shot_for_this_two_202606171649.webp'
    }
  ];

  return (
    <div style={{ background:'#FFF', minHeight:'100vh' }}>
      <style>{`
        .qv-intro-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:stretch}
        .qv-intro-left{display:flex;flex-direction:column}
        .qv-intro-right{display:flex;flex-direction:column}
        .qv-img-container{border-radius:8px;overflow:hidden;flex:1;min-height:320px;background:#F8F8F6}
        .qv-img-container img{width:100%;height:100%;object-fit:cover;display:block}
        .qv-advantages{padding-top:20px;margin-top:auto}
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(-4px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .qv-ctas{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
        .qv-cta-btn{display:inline-flex;align-items:center;font-family:var(--font-sans);font-size:12px;font-weight:700;color:var(--ink);transition:color 0.2s;white-space:nowrap;text-decoration:none}
        .qv-cta-btn:hover{color:var(--accent)}
        .qv-pdf-soon{font-size:12px;color:var(--ink-3);font-style:italic}
        .qv-detail-ul{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2)}
        .qv-detail-ul li{line-height:1.45}
        @media(max-width:768px){
          .qv-intro-grid{grid-template-columns:1fr !important;gap:24px}
          .qv-img-container{min-height:220px}
          .qv-products-grid{grid-template-columns: 1fr 1fr !important; gap: 16px !important;}
          .qv-format-bullets{display: none !important;}
        }
      `}</style>

      {/* HERO */}
      <section style={{ padding:'0 4.6vw clamp(60px,8vw,100px)', paddingTop:'clamp(72px,5.3vw,101.874px)', background:'var(--bg)' }}>
        <div style={{ maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:40, alignItems:'center', paddingTop:48 }}>
          <div>
            <h1 style={{ margin:0, fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(63px,8.75vw,126px)', lineHeight:.95, letterSpacing:'-0.025em' }}>Químicos.</h1>
          </div>
          <div style={{ borderRadius:8, overflow:'hidden', height:'clamp(280px,30vw,460px)', background:'#d6d6d2' }}>
            <img src={A.quimicos2} alt="Químicos" style={{ width:'100%', height:'100%', objectFit:'cover' }}loading="lazy" />
          </div>
        </div>
      </section>

      {/* SECCIONES */}
      <div style={{ background:'#FFF', display:'flex', flexDirection:'column' }}>
        {sections.map((sec, index) => {
          const sectionProducts = QUIMICOS_DATA.filter(p => p.cat === sec.id);
          if (sectionProducts.length === 0) return null;
          const isSpec = sec.id === 'especialidades';
          const isEven = index % 2 === 0;
          const sectionBg = isEven ? '#FFF' : 'rgb(235,231,224)';
          const tableBg   = isEven ? 'rgb(235,231,224)' : '#FFF';
          return (
            <section key={sec.id} style={{
              padding: 'clamp(60px,8vw,100px) 4.6vw',
              borderBottom: '1px solid var(--line)',
              background: sectionBg
            }}>
              <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 40 }}>
                <div className="qv-intro-grid">
                  <div className="qv-intro-left">
                    <h2 style={{ fontSize:'clamp(42px,4.5vw,66px)', fontWeight:700, margin:'0 0 16px', letterSpacing:'-0.025em', color:'var(--ink)' }}>{sec.title}</h2>
                    <p style={{ margin:'0 0 8px', fontSize:12, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.02em', fontWeight:300 }}>{sec.app}</p>
                    <p style={{ margin:'0 0 24px', color:'var(--ink-3)', fontSize:12, lineHeight:1.65, fontWeight:300 }}>{sec.desc}</p>
                  <div className="qv-advantages">
                    <ul style={{ margin:0, paddingLeft:24, listStyle:'none', display:'flex', flexDirection:'column', gap:10 }}>
                      {sec.ventajas.map((v, i) => (
                        <li key={i} style={{ display:'flex', alignItems:'center', gap:10 }}>
                          <span style={{ display:'inline-block', width:8, height:8, borderRadius:'50%', background:'var(--accent)', flexShrink:0 }}/>
                          <span style={{ fontSize:16, color:'var(--ink)', lineHeight:1.45, fontWeight:300 }}>{v}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
                <div className="qv-intro-right">
                  <div className="qv-img-container">
                    <img src={sec.img} alt={sec.title}loading="lazy" />
                  </div>
                </div>
              </div>

              <div className="qv-products-grid" style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
                gap: 40,
                marginTop: 20
              }}>
                {sectionProducts.map(p => {
                  const name = isSpec ? p.name : p.name
                    .replace('Decapante en ','').replace('Decapante ','')
                    .replace('Pasivante en ','').replace('Pasivante ','')
                    .replace('Neutralizante en ','').replace('Neutralizante ','');

                  const allBullets = [p.ventajaPrincipal, ...(p.ventajas || [])];

                  return (
                    <div key={p.code} style={{
                      display: 'flex',
                      flexDirection: 'column',
                      gap: 16,
                      background: 'transparent',
                      padding: '24px 0'
                    }}>
                      <div>
                        <h3 style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', fontWeight: 700, margin: 0, color: 'var(--ink)' }}>{name}</h3>
                      </div>

                      <ul className="qv-format-bullets" style={{ margin: 0, paddingLeft: 24, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
                        {allBullets.map((b, idx) => (
                          <li key={idx} style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--ink)', fontWeight: 300 }}>
                            - {b}
                          </li>
                        ))}
                      </ul>

                      <div style={{ display: 'flex', alignItems: 'center', marginTop: 4 }}>
                        <button onClick={() => toggleExpand(sec.id)} style={{
                          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                          background: 'none', border: 'none', color: 'var(--ink)', fontSize: 28, fontWeight: 300, cursor: 'pointer',
                          padding: '4px 0', lineHeight: 1, fontFamily: 'var(--font-sans)', width: 32, height: 32
                        }}>
                          {expanded[sec.id] ? '–' : '+'}
                        </button>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

              {/* SECTION-WIDE DETAILS TABLE (No background, transparent) */}
              {expanded[sec.id] && (
                <div style={{ width: '100%', animation: 'fadeIn 0.25s ease', overflowX: 'auto' }}>
                  <table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left', fontSize: 13, fontFamily: 'var(--font-sans)' }}>
                    <thead>
                      <tr style={{ borderBottom: '1.5px solid rgba(10,10,10,0.12)' }}>
                        {sectionProducts.map(p => {
                          const displayName = isSpec ? p.name : p.name
                            .replace('Decapante en ','').replace('Decapante ','')
                            .replace('Pasivante en ','').replace('Pasivante ','')
                            .replace('Neutralizante en ','').replace('Neutralizante ','');
                          return (
                            <th key={p.code} style={{ padding: '14px 18px', fontWeight: 700, color: 'var(--ink)', width: `${100 / sectionProducts.length}%` }}>
                              {displayName}
                            </th>
                          );
                        })}
                      </tr>
                    </thead>
                    <tbody>
                      {/* 1. Presentación & SKUs */}
                      <tr>
                        <td colSpan={sectionProducts.length} style={{ padding: '14px 18px 6px', color: 'var(--ink-3)', fontWeight: 300, fontSize: 11, textTransform: 'uppercase', letterSpacing: '.05em' }}>
                          Presentación & SKUs
                        </td>
                      </tr>
                      <tr style={{ borderBottom: '1px solid rgba(10,10,10,0.06)' }}>
                        {sectionProducts.map(p => {
                          const skus = getChemicalSkus(p.code);
                          return (
                            <td key={p.code} style={{ padding: '4px 18px 14px', verticalAlign: 'top' }}>
                              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
                                <tbody>
                                  {skus.map((s, idx) => (
                                    <tr key={idx} style={{ borderBottom: idx < skus.length - 1 ? '1px solid rgba(10,10,10,0.05)' : 'none' }}>
                                      <td style={{ padding: '6px 0', color: 'var(--ink-2)', fontWeight: 300 }}>{s.size}</td>
                                      <td style={{ padding: '6px 0', textAlign: 'right', fontWeight: 400, fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--ink)' }}>{s.sku}</td>
                                    </tr>
                                  ))}
                                </tbody>
                              </table>
                            </td>
                          );
                        })}
                      </tr>

                      {/* 2. Ventajas */}
                      <tr>
                        <td colSpan={sectionProducts.length} style={{ padding: '14px 18px 6px', color: 'var(--ink-3)', fontWeight: 300, fontSize: 11, textTransform: 'uppercase', letterSpacing: '.05em' }}>
                          Ventajas
                        </td>
                      </tr>
                      <tr style={{ borderBottom: '1px solid rgba(10,10,10,0.06)' }}>
                        {sectionProducts.map(p => {
                          const allBullets = [p.ventajaPrincipal, ...(p.ventajas || [])];
                          return (
                            <td key={p.code} style={{ padding: '4px 18px 14px', color: 'var(--ink)', fontWeight: 300, verticalAlign: 'top' }}>
                              <ul style={{ margin: 0, paddingLeft: 12, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 4 }}>
                                {allBullets.map((b, idx) => (
                                  <li key={idx} style={{ fontSize: 12, lineHeight: 1.4 }}>- {b}</li>
                                ))}
                              </ul>
                            </td>
                          );
                        })}
                      </tr>

                      {/* 3. Aplicación */}
                      <tr>
                        <td colSpan={sectionProducts.length} style={{ padding: '14px 18px 6px', color: 'var(--ink-3)', fontWeight: 300, fontSize: 11, textTransform: 'uppercase', letterSpacing: '.05em' }}>
                          Aplicación
                        </td>
                      </tr>
                      <tr style={{ borderBottom: '1px solid rgba(10,10,10,0.06)' }}>
                        {sectionProducts.map(p => (
                          <td key={p.code} style={{ padding: '4px 18px 14px', color: 'var(--ink)', fontWeight: 300, verticalAlign: 'top' }}>
                            {p.app}
                          </td>
                        ))}
                      </tr>

                      {/* 4. Rendimiento */}
                      <tr>
                        <td colSpan={sectionProducts.length} style={{ padding: '14px 18px 6px', color: 'var(--ink-3)', fontWeight: 300, fontSize: 11, textTransform: 'uppercase', letterSpacing: '.05em' }}>
                          Rendimiento
                        </td>
                      </tr>
                      <tr style={{ borderBottom: '1px solid rgba(10,10,10,0.06)' }}>
                        {sectionProducts.map(p => (
                          <td key={p.code} style={{ padding: '4px 18px 14px', color: 'var(--ink)', fontWeight: 300, verticalAlign: 'top' }}>
                            {p.rendimiento || '—'}
                          </td>
                        ))}
                      </tr>

                      {/* 5. Modo de Uso */}
                      <tr>
                        <td colSpan={sectionProducts.length} style={{ padding: '14px 18px 6px', color: 'var(--ink-3)', fontWeight: 300, fontSize: 11, textTransform: 'uppercase', letterSpacing: '.05em' }}>
                          Modo de Uso
                        </td>
                      </tr>
                      <tr style={{ borderBottom: '1px solid rgba(10,10,10,0.06)' }}>
                        {sectionProducts.map(p => (
                          <td key={p.code} style={{ padding: '4px 18px 14px', color: 'var(--ink)', fontWeight: 300, verticalAlign: 'top' }}>
                            {p.usoResumido}
                          </td>
                        ))}
                      </tr>

                      {/* 6. Validez */}
                      {sectionProducts.some(p => p.validez) && (
                        <>
                          <tr>
                            <td colSpan={sectionProducts.length} style={{ padding: '14px 18px 6px', color: 'var(--ink-3)', fontWeight: 300, fontSize: 11, textTransform: 'uppercase', letterSpacing: '.05em' }}>
                              Validez
                            </td>
                          </tr>
                          <tr style={{ borderBottom: '1px solid rgba(10,10,10,0.06)' }}>
                            {sectionProducts.map(p => (
                              <td key={p.code} style={{ padding: '4px 18px 14px', color: 'var(--ink)', fontWeight: 300, verticalAlign: 'top' }}>
                                {p.validez || '—'}
                              </td>
                            ))}
                          </tr>
                        </>
                      )}
                    </tbody>
                  </table>
                </div>
              )}

              {/* GRID 2: FOOTER ACTIONS (Ficha Técnica & Cotización) */}
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
                gap: 40,
                marginTop: 20
              }}>
                {sectionProducts.map(p => (
                  <div key={p.code} style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    gap: 16,
                    padding: '16px 0',
                    borderTop: '1px solid rgba(10,10,10,0.06)'
                  }}>
                    <div>
                      {HAS_PDF_FICHAS
                        ? <a href={p.pdf} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--accent)', fontWeight: 700, fontSize: 13 }}>Descargar Ficha</a>
                        : <span style={{ fontSize: 12, color: 'var(--ink-3)', fontStyle: 'italic' }}>Próximamente</span>}
                    </div>
                    <div className="qv-ctas" style={{ display: 'flex', gap: 12 }}>
                      {p.linkAla && <a href={p.linkAla} target="_blank" rel="noopener noreferrer" className="qv-cta-btn">Alaindustria →</a>}
                      {p.linkFamiq && <a href={p.linkFamiq} target="_blank" rel="noopener noreferrer" className="qv-cta-btn">Famiq →</a>}
                    </div>
                  </div>
                ))}
              </div>
          </section>
        );
      })}
    </div>

      {/* CTA */}
      <section style={{ padding:'100px 4.6vw', borderBottom:'1px solid var(--line)' }}>
        <div className="cta-flex" style={{ maxWidth:1280, margin:'0 auto', display:'flex', alignItems:'center', justifyContent:'space-between', gap:48, flexWrap:'wrap' }}>
          <h2 style={{ margin:0, fontFamily:'var(--font-sans)', fontWeight:700, fontSize:'clamp(28px,4.5vw,68px)', lineHeight:.95, letterSpacing:'-0.02em', maxWidth:760 }}>
            Probalo en tu planta,<br/>
            <span style={{ color:'var(--ink-2)', fontWeight:300 }}>pedinos una demo.</span>
          </h2>
          <button onClick={() => window.open(KONNEN_WA,'_blank','noopener')} className="hover-cta arrow-cta btn-border-cta" style={{ display:'inline-flex', alignItems:'center', background:'var(--accent)', color:'#FAFAFA', padding:'18px 32px', borderRadius:8, fontWeight:500, fontSize:15, fontFamily:'var(--font-sans)', border:'none', cursor:'pointer' }}>
            Contactar a Konnen <span className="arrow">→</span>
          </button>
        </div>
      </section>
    </div>
  );
}
function App() {
  const [view,      setView]      = useState('home');
  const [productId, setProductId] = useState(null);
  const [heroVis,   setHeroVis]   = useState(true);
  const pendingScroll = useRef(null);

  useEffect(() => {
    if (view !== 'home') { setHeroVis(false); return; }
    const fn = () => {
      const cadena = document.getElementById('cadena');
      if (cadena) {
        setHeroVis(cadena.getBoundingClientRect().top > 80);
      } else {
        setHeroVis(window.scrollY < window.innerHeight * 0.6);
      }
    };
    window.addEventListener('scroll', fn, { passive: true });
    fn();
    return () => window.removeEventListener('scroll', fn);
  }, [view]);

  // ── Historial del navegador ──────────────────────────────────────────────
  // Antes la vista (home / product / quimicos) vivía solo en estado de React, así
  // que el botón "Atrás" del navegador sacaba al usuario de toda la web de Konnen.
  // Apilamos las vistas product/quimicos en history y restauramos en popstate.
  useEffect(() => {
    try { history.replaceState({ view: 'home', productId: null }, ''); } catch (e) {}
    const onPop = (e) => {
      const st = e.state || { view: 'home', productId: null };
      setView(st.view || 'home');
      setProductId(st.view === 'product' ? st.productId : null);
      window.scrollTo(0, 0);
      const tgt = pendingScroll.current;
      pendingScroll.current = null;
      if ((st.view === 'home' || !st.view) && tgt) setTimeout(() => {
        const el = document.getElementById(tgt);
        if (el) el.scrollIntoView({ behavior: 'smooth' });
      }, 80);
    };
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  const navigate = (v, targetId) => {
    // Volver a home desde una vista apilada: usamos el historial real para que
    // "Atrás" del navegador y los botones de volver hagan lo mismo.
    if (v === 'home' && view !== 'home') {
      pendingScroll.current = targetId || null;
      try { history.back(); return; } catch (e) { pendingScroll.current = null; }
    }
    const alreadyHome = (v === 'home' && view === 'home');
    setView(v);
    setProductId(null);
    if (v !== view) { try { history.pushState({ view: v, productId: null }, ''); } catch (e) {} }
    if (!alreadyHome) window.scrollTo(0, 0);
    if (targetId) setTimeout(() => {
      const el = document.getElementById(targetId);
      if (el) el.scrollIntoView({ behavior:'smooth' });
    }, alreadyHome ? 0 : 80);
  };

  const openProduct = (id) => {
    setProductId(id);
    setView('product');
    window.scrollTo(0, 0);
    try { history.pushState({ view: 'product', productId: id }, ''); } catch (e) {}
  };

  return (
    <div style={{ minHeight:'100vh', display:'flex', flexDirection:'column' }}>
      <Nav dark={view === 'home' && heroVis} onNavigate={navigate}/>

      <div style={{ flex:1 }}>
        {view === 'home' && (
          <HomeView
            onSelectProduct={openProduct}
            onNavigateQuimicos={() => navigate('quimicos')}
          />
        )}
        {view === 'product' && (
          <ProductView productId={productId} onBack={() => navigate('home','productos')} onContact={() => navigate('home','contacto')}/>
        )}
        {view === 'quimicos' && (
          <QuimicosView onBack={() => navigate('home','productos')} onContact={() => navigate('home','contacto')}/>
        )}
      </div>

      <footer style={{ background:'#161616', padding:'56px 4.6vw 40px' }}>
        <div style={{ maxWidth:1280, margin:'0 auto', display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap:24 }}>
          <span style={{ color:'rgba(250,250,250,0.55)', fontSize:13, fontFamily:'var(--font-sans)' }}>© 2026 Konnen — Consumibles industriales</span>
          <div style={{ display:'flex', gap:32 }}>
            {[['Productos',() => navigate('home','productos')],['Demo',() => navigate('home','contacto')],['Contacto',() => navigate('home','contacto')]].map(([lbl,fn]) => (
              <button key={lbl} onClick={fn} style={{ color:'rgba(250,250,250,0.55)', fontSize:13, fontWeight:400, background:'none', border:'none', cursor:'pointer', fontFamily:'var(--font-sans)' }}>{lbl}</button>
            ))}
          </div>
        </div>
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);