// casos-v2.jsx — Portfolio real de productos (Tasty destacado + grilla de 5)
// Aislado: sólo lo carga "Eurekant Website v2.html". No toca la página actual.

const CASOS_CONTENT = {
  es: {
    eyebrow: 'CASOS — SOFTWARE EN PRODUCCIÓN',
    title: 'Lo que construimos',
    sub: 'Productos reales, en producción, en sectores muy distintos. Del punto de venta al aula, del campo al municipio: mismo estándar de calidad.',
    sectorsLabel: 'Sectores donde ya operamos',
    sectors: ['Gastronomía', 'Agro', 'Salud', 'Gobierno', 'Educación', 'RR.HH.'],
    featuredTag: 'CASO DESTACADO',
    items: [
      {
        key: 'crm-agro', img: 'assets/product-crm-agro.png', kind: 'laptop',
        sector: 'Agro', name: 'CRM Agro',
        desc: 'CRM para el agro: clientes, segmentación por hectáreas y cultivos, y seguimiento de actividad comercial en un solo lugar.'
      },
      {
        key: 'synergys', img: 'assets/product-synergys.png', kind: 'laptop',
        sector: 'Salud ocupacional', name: 'Synergys',
        desc: 'Plataforma de medicina laboral: exámenes, campañas de vacunación, controles y seguimiento de eventos por espacio de trabajo.'
      },
      {
        key: 'comunidad-cima', img: 'assets/product-comunidad-cima.png', kind: 'phone',
        sector: 'Odontología', name: 'Comunidad Cima',
        desc: 'App para centros odontológicos con gamificación: sistema de créditos, turnos por sucursal y gestión del grupo familiar.'
      },
      {
        key: 'portal-municipal', img: 'assets/product-portal-municipal.png', kind: 'phone',
        sector: 'Gobierno', name: 'Portal Municipal',
        desc: 'Portal ciudadano para municipios: noticias, ejes de inversión y participación de la comunidad desde el celular.'
      },
      {
        key: 'schoolfy', img: 'assets/product-schoolfy.png', kind: 'phone',
        sector: 'Educación', name: 'Schoolfy 365',
        desc: 'Comunicación escuela–familia: comunicados con estadísticas de lectura, likes y participación en tiempo real.'
      }
    ],
    cta: { label: 'Tu producto, el próximo caso', text: 'Contanos qué querés construir y armamos el camino.', btn: 'Agendar diagnóstico' },
    cardCta: 'Ver detalle'
  },
  en: {
    eyebrow: 'CASES — SOFTWARE IN PRODUCTION',
    title: 'What we build',
    sub: 'Real products, in production, across very different industries. From point of sale to the classroom, from the field to the city hall: same quality standard.',
    sectorsLabel: 'Industries we already serve',
    sectors: ['Hospitality', 'Agro', 'Health', 'Government', 'Education', 'HR'],
    featuredTag: 'FEATURED CASE',
    items: [
      { key: 'crm-agro', img: 'assets/product-crm-agro.png', kind: 'laptop', sector: 'Agro', name: 'CRM Agro', desc: 'CRM for agribusiness: clients, segmentation by hectares and crops, and commercial activity tracking in one place.' },
      { key: 'synergys', img: 'assets/product-synergys.png', kind: 'laptop', sector: 'Occupational health', name: 'Synergys', desc: 'Occupational medicine platform: exams, vaccination campaigns, controls and event tracking per workspace.' },
      { key: 'comunidad-cima', img: 'assets/product-comunidad-cima.png', kind: 'phone', sector: 'Dental', name: 'Comunidad Cima', desc: 'App for dental centers with gamification: a credits system, branch booking and family-group management.' },
      { key: 'portal-municipal', img: 'assets/product-portal-municipal.png', kind: 'phone', sector: 'Government', name: 'Portal Municipal', desc: 'Citizen portal for municipalities: news, investment areas and community participation from the phone.' },
      { key: 'schoolfy', img: 'assets/product-schoolfy.png', kind: 'phone', sector: 'Education', name: 'Schoolfy 365', desc: 'School–family communication: announcements with read stats, likes and participation in real time.' }
    ],
    cta: { label: 'Your product, the next case', text: 'Tell us what you want to build and we map the path.', btn: 'Book diagnosis' },
    cardCta: 'View detail'
  }
};
window.CASOS_CONTENT = CASOS_CONTENT;

function injectPortfolioStyles() {
  if (document.getElementById('portfolio-v2-styles')) return;
  const s = document.createElement('style');
  s.id = 'portfolio-v2-styles';
  s.textContent = `
    @property --pfAngle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
    @keyframes pfBorderRotate { to { --pfAngle: 360deg; } }
    @keyframes pfFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
    @keyframes pfCardIn {
      from { opacity: 0; filter: blur(6px); transform: perspective(1400px) rotateX(-46deg) rotateY(10deg) translateY(120px) scale(.78); }
      60%  { filter: blur(0px); }
      to   { opacity: 1; filter: blur(0px); transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1); }
    }
    @keyframes pfDeviceIn { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
    @keyframes pfCtaGlowPulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .95; transform: scale(1.1); } }
    @keyframes pfCtaArrow { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
    @keyframes pfCtaDash { to { stroke-dashoffset: -300; } }
    .pf-featured-wrap {
      position: relative; border-radius: 34px; padding: 1px;
      background: conic-gradient(from var(--pfAngle),
        transparent 0%, #2199ea 12%, #63b7f0 22%, #137dc5 32%, transparent 46%, transparent 100%),
        rgba(120,140,210,0.16);
      animation: pfBorderRotate 7s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .pf-featured-wrap { animation: none; }
      .pf-device { animation: none !important; }
    }
  `;
  document.head.appendChild(s);
}

// ── Tarjeta de producto con tilt 3D + spotlight + float del device ──
function PortfolioCard({ item, index, cardCta }) {
  const F = window.F;
  const ref = React.useRef(null);
  const inView = useInView(ref, { threshold: 0.15 });
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });
  const [hover, setHover] = React.useState(false);
  const [spot, setSpot] = React.useState({ x: 50, y: 30 });

  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    const nx = (e.clientX - r.left) / r.width;
    const ny = (e.clientY - r.top) / r.height;
    setTilt({ x: (nx - 0.5) * 14, y: (ny - 0.5) * -14 });
    setSpot({ x: nx * 100, y: ny * 100 });
  };

  const isPhone = item.kind === 'phone';

  return (
    <div
      ref={ref}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setTilt({ x: 0, y: 0 }); }}
      onMouseMove={onMove}
      style={{
        position: 'relative', borderRadius: 24, overflow: 'hidden', cursor: 'pointer',
        background: hover ? F.surfaceHi : F.surface,
        border: `1px solid ${hover ? F.accent : F.line}`,
        padding: 28, height: '100%', minHeight: 440,
        display: 'flex', flexDirection: 'column',
        transform: `perspective(1100px) rotateY(${tilt.x}deg) rotateX(${tilt.y}deg) translateY(${hover ? -10 : 0}px) scale(${hover ? 1.015 : 1})`,
        transformStyle: 'preserve-3d',
        transition: inView ? 'transform .45s cubic-bezier(.2,.7,.2,1), border-color .3s, background .3s, box-shadow .4s' : 'none',
        opacity: inView ? 1 : 0,
        animation: inView ? `pfCardIn .9s cubic-bezier(.16,.84,.3,1) ${index * 0.1}s backwards` : 'none',
        boxShadow: hover ? `0 34px 70px -20px rgba(0,0,0,0.65), 0 0 46px ${F.accentGlow}` : '0 8px 24px -12px rgba(0,0,0,0.5)',
        willChange: 'transform'
      }}>
      {/* top hairline glow */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1,
        background: `linear-gradient(90deg, transparent, ${F.accent}, transparent)`,
        opacity: hover ? 1 : 0, transition: 'opacity .4s'
      }} />
      {/* spotlight follow */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        opacity: hover ? 0.16 : 0, transition: 'opacity .4s',
        background: `radial-gradient(circle at ${spot.x}% ${spot.y}%, ${F.accent} 0%, transparent 55%)`
      }} />

      {/* media */}
      <div style={{
        position: 'relative', flex: '1 1 auto', minHeight: 250,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 24
      }}>
        {/* glow behind device */}
        <div style={{
          position: 'absolute', width: '70%', height: '55%', borderRadius: '50%',
          background: `radial-gradient(circle, ${F.accentGlow}, transparent 70%)`,
          filter: 'blur(30px)', opacity: hover ? 0.9 : 0.5, transition: 'opacity .5s'
        }} />
        <div style={{
          position: 'relative',
          transform: hover ? 'translateY(-6px) scale(1.05)' : 'none',
          transition: 'transform .5s cubic-bezier(.2,.7,.2,1)'
        }}>
          <img
            className="pf-device"
            src={item.img}
            alt={item.name}
            style={{
              position: 'relative',
              maxWidth: isPhone ? '52%' : '100%',
              maxHeight: isPhone ? 300 : 220,
              width: 'auto', height: 'auto', objectFit: 'contain', display: 'block',
              filter: `drop-shadow(0 24px 40px rgba(0,0,0,0.55))`,
              animation: inView ? `pfFloat ${6 + index}s ease-in-out ${index * 0.4}s infinite` : 'none'
            }} />
        </div>
      </div>

      {/* meta */}
      <div style={{ position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <span style={{
            padding: '5px 12px', borderRadius: 999,
            background: 'rgba(33,153,234,0.12)', border: `1px solid rgba(33,153,234,0.3)`,
            color: F.accent, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.12em',
            textTransform: 'uppercase', fontFamily: 'var(--font-mono)', whiteSpace: 'nowrap'
          }}>{item.sector}</span>
        </div>
        <h3 style={{
          fontFamily: 'var(--font-heading)', fontSize: 24, fontWeight: 500,
          color: F.text, margin: '0 0 12px', letterSpacing: '-0.01em'
        }}>{item.name}</h3>
        <p style={{ color: F.textDim, fontSize: 14, lineHeight: 1.6, margin: '0 0 20px' }}>{item.desc}</p>
        <div style={{
          color: F.accent, fontFamily: 'var(--font-heading)', fontSize: 13, fontWeight: 600,
          letterSpacing: '0.02em', display: 'flex', alignItems: 'center', gap: 8,
          transform: hover ? 'translateX(6px)' : 'translateX(0)', transition: 'transform .4s'
        }}>{cardCta} <span>→</span></div>
      </div>
    </div>
  );
}

// ── Tarjeta CTA — combina constelación, borde dibujado, scan holográfico,
//    label cíclico de sectores y stack de capas fantasma ──
function PortfolioCtaCard({ cta, index = 5 }) {
  const F = window.F;
  const outerRef = React.useRef(null);
  const wrapRef = React.useRef(null);
  const canvasRef = React.useRef(null);
  const inView = useInView(outerRef, { threshold: 0.15 });
  const [hover, setHover] = React.useState(false);
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });
  const [sectorIdx, setSectorIdx] = React.useState(-1); // -1 = estado final "EL TUYO"
  const sectors = ['AGRO', 'SALUD', 'GOBIERNO', 'EDUCACIÓN', 'GASTRONOMÍA'];

  const onMove = (e) => {
    const r = wrapRef.current.getBoundingClientRect();
    const nx = (e.clientX - r.left) / r.width;
    const ny = (e.clientY - r.top) / r.height;
    setTilt({ x: (nx - 0.5) * 10, y: (ny - 0.5) * -10, mx: nx * 100, my: ny * 100 });
  };

  // slot-machine del label al hacer hover
  React.useEffect(() => {
    if (!hover) { setSectorIdx(-1); return; }
    let i = 0;
    const iv = setInterval(() => {
      i++;
      if (i >= sectors.length + 3) { clearInterval(iv); setSectorIdx(-1); return; }
      setSectorIdx(i % sectors.length);
    }, 110);
    return () => clearInterval(iv);
  }, [hover]);

  // constelación de nodos en canvas
  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    let w = 0, h = 0, dpr = Math.min(window.devicePixelRatio || 1, 2);
    const N = 22;
    const pts = Array.from({ length: N }, () => ({
      x: Math.random(), y: Math.random(),
      vx: (Math.random() - 0.5) * 0.0006, vy: (Math.random() - 0.5) * 0.0006
    }));
    const resize = () => {
      const r = canvas.getBoundingClientRect();
      w = r.width; h = r.height;
      canvas.width = w * dpr; canvas.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(canvas);

    const mouse = { x: -1, y: -1 };
    const moveHandler = (e) => {
      const r = canvas.getBoundingClientRect();
      mouse.x = (e.clientX - r.left) / r.width;
      mouse.y = (e.clientY - r.top) / r.height;
    };
    const leaveHandler = () => { mouse.x = -1; mouse.y = -1; };
    canvas.parentElement.addEventListener('mousemove', moveHandler);
    canvas.parentElement.addEventListener('mouseleave', leaveHandler);

    const draw = () => {
      ctx.clearRect(0, 0, w, h);
      pts.forEach(p => {
        p.x += p.vx; p.y += p.vy;
        if (p.x < 0 || p.x > 1) p.vx *= -1;
        if (p.y < 0 || p.y > 1) p.vy *= -1;
      });
      const all = mouse.x >= 0 ? pts.concat([{ x: mouse.x, y: mouse.y, mouse: true }]) : pts;
      for (let i = 0; i < all.length; i++) {
        for (let j = i + 1; j < all.length; j++) {
          const a = all[i], b = all[j];
          const dx = (a.x - b.x) * w, dy = (a.y - b.y) * h;
          const d = Math.sqrt(dx * dx + dy * dy);
          const max = (a.mouse || b.mouse) ? 170 : 90;
          if (d < max) {
            const op = (a.mouse || b.mouse) ? (1 - d / max) * 0.55 : (1 - d / max) * 0.16;
            ctx.strokeStyle = `rgba(125,208,255,${op})`;
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(a.x * w, a.y * h);
            ctx.lineTo(b.x * w, b.y * h);
            ctx.stroke();
          }
        }
      }
      pts.forEach(p => {
        ctx.fillStyle = 'rgba(125,208,255,0.6)';
        ctx.beginPath();
        ctx.arc(p.x * w, p.y * h, 1.6, 0, Math.PI * 2);
        ctx.fill();
      });
      raf = requestAnimationFrame(draw);
    };
    draw();
    return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.parentElement.removeEventListener('mousemove', moveHandler); canvas.parentElement.removeEventListener('mouseleave', leaveHandler); };
  }, []);

  return (
    <div ref={outerRef} style={{
      position: 'relative', height: '100%',
      opacity: inView ? 1 : 0,
      animation: inView ? `pfCardIn .9s cubic-bezier(.16,.84,.3,1) ${index * 0.1}s backwards` : 'none'
    }}>
      {/* capas fantasma apiladas detrás */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, borderRadius: 25,
        border: `1px solid ${F.lineStrong}`, background: F.surface,
        transform: hover ? 'translate(14px, 18px) rotate(-2.5deg)' : 'translate(6px, 8px) rotate(-1deg)',
        opacity: hover ? 0.55 : 0.35, filter: 'blur(1px)',
        transition: 'transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s'
      }} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0, borderRadius: 25,
        border: `1px solid ${F.line}`, background: F.surface,
        transform: hover ? 'translate(7px, 9px) rotate(-1.2deg)' : 'translate(3px, 4px) rotate(-0.5deg)',
        opacity: hover ? 0.75 : 0.55, filter: 'blur(0.4px)',
        transition: 'transform .5s cubic-bezier(.2,.7,.2,1) .04s, opacity .5s'
      }} />

      <div
        ref={wrapRef}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => { setHover(false); setTilt({ x: 0, y: 0 }); }}
        onMouseMove={onMove}
        style={{
          position: 'relative', borderRadius: 25, overflow: 'hidden', minHeight: 436, height: '100%',
          padding: 40, display: 'flex', flexDirection: 'column', justifyContent: 'center', cursor: 'pointer',
          background: 'linear-gradient(155deg, rgba(33,153,234,0.2), rgba(19,125,197,0.05) 55%, rgba(19,125,197,0.1))',
          transform: `perspective(1100px) rotateY(${tilt.x || 0}deg) rotateX(${tilt.y || 0}deg) translateY(${hover ? -10 : 0}px)`,
          transition: 'transform .4s cubic-bezier(.2,.7,.2,1)',
          boxShadow: hover ? `0 40px 80px -24px rgba(0,0,0,0.7), 0 0 60px ${F.accentGlow}` : `0 12px 30px -14px rgba(0,0,0,0.5)`
        }}>
        {/* borde dibujado (marching ants) */}
        <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          <rect x="1" y="1" width="calc(100% - 2px)" height="calc(100% - 2px)" rx="24" fill="none"
            stroke={hover ? '#7dd0ff' : 'rgba(125,208,255,0.35)'} strokeWidth="1.5"
            strokeDasharray="10 8" style={{ animation: 'pfCtaDash 9s linear infinite', transition: 'stroke .4s' }} />
        </svg>

        {/* constelación */}
        <canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: hover ? 1 : 0.6, transition: 'opacity .5s' }} />

        {/* glow orb pulsante */}
        <div style={{
          position: 'absolute', top: '-25%', right: '-15%', width: 320, height: 320, borderRadius: '50%',
          background: `radial-gradient(circle, ${F.accentGlow}, transparent 70%)`, filter: 'blur(44px)',
          animation: 'pfCtaGlowPulse 4s ease-in-out infinite', pointerEvents: 'none'
        }} />
        {/* spotlight cursor */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          opacity: hover ? 0.18 : 0, transition: 'opacity .4s',
          background: `radial-gradient(circle at ${tilt.mx || 50}% ${tilt.my || 20}%, ${F.accent} 0%, transparent 55%)`
        }} />

        <div style={{ position: 'relative' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, minWidth: 168,
            padding: '5px 14px', borderRadius: 999, marginBottom: 26,
            background: 'linear-gradient(135deg, #2199ea 20%, #137dc5)', color: '#fff',
            fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
            fontFamily: 'var(--font-body)', boxShadow: `0 6px 18px ${F.accentGlow}`
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: '50%', background: '#fff', flex: 'none',
              animation: 'pfCtaGlowPulse 1.6s ease-in-out infinite'
            }} />
            {sectorIdx === -1 ? 'PRÓXIMO CASO: EL TUYO' : sectors[sectorIdx]}
          </div>
          <h3 style={{
            fontFamily: 'var(--font-heading)', fontSize: 32, fontWeight: 500,
            color: F.text, margin: '0 0 16px', letterSpacing: '-0.02em', lineHeight: 1.08
          }}>{cta.label}</h3>
          <p style={{ color: F.textDim, fontSize: 15, lineHeight: 1.6, margin: '0 0 32px' }}>{cta.text}</p>
          <Magnetic strength={0.3} style={{ display: 'inline-block' }}>
            <button style={{
              padding: '14px 26px', backgroundImage: 'linear-gradient(135deg, #2199ea 20%, #137dc5)',
              color: '#fff', border: 'none', borderRadius: 12, cursor: 'pointer',
              fontFamily: 'var(--font-heading)', fontSize: 14, fontWeight: 500,
              display: 'inline-flex', alignItems: 'center', gap: 10,
              boxShadow: hover ? `0 0 34px ${F.accentGlow}` : `0 0 24px ${F.accentGlow}`,
              transition: 'box-shadow .4s'
            }} onClick={() => { window.location.href = 'agendar'; }}>
              {cta.btn}
              <span style={{ display: 'inline-block', animation: hover ? 'pfCtaArrow 1s ease-in-out infinite' : 'none' }}>→</span>
            </button>
          </Magnetic>
        </div>
      </div>
    </div>
  );
}

// ── Sección completa: Tasty destacado + grilla de 5 + CTA ──
function FPortfolio({ content }) {
  const F = window.F;
  const cc = (window.CASOS_CONTENT && window.CASOS_CONTENT[content.__lang || 'es']) || CASOS_CONTENT.es;
  const caso = content.caso;
  const ref = React.useRef(null);
  const inView = useInView(ref, { threshold: 0.15 });

  React.useEffect(() => { injectPortfolioStyles(); }, []);

  return (
    <section ref={ref} id="casos" style={{ padding: '160px 80px', position: 'relative', overflow: 'hidden' }}>
      <Parallax speed={0.3} style={{ position: 'absolute', top: 80, right: -60, pointerEvents: 'none' }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 240, fontWeight: 200,
          color: 'transparent', WebkitTextStroke: `1px ${F.line}`, opacity: 0.4
        }}>04</div>
      </Parallax>

      {/* header */}
      <div style={{ maxWidth: 1280, margin: '0 auto 72px', position: 'relative' }}>
        <div style={{ color: F.accent, fontSize: 12, letterSpacing: '0.2em', marginBottom: 24, fontFamily: 'var(--font-mono)' }}>
          // {cc.eyebrow}
        </div>
        <h2 style={{
          fontFamily: 'var(--font-heading)', fontSize: 'clamp(44px, 5.5vw, 84px)',
          fontWeight: 500, lineHeight: 0.95, margin: 0, color: F.text,
          maxWidth: 900, letterSpacing: '-0.02em'
        }}>{cc.title}</h2>
        <p style={{ color: F.textDim, fontSize: 19, maxWidth: 720, marginTop: 28, lineHeight: 1.55 }}>{cc.sub}</p>

        {/* sectors chips */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 36, alignItems: 'center' }}>
          <span style={{ color: F.textMute, fontSize: 11, letterSpacing: '0.16em', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', marginRight: 6 }}>{cc.sectorsLabel} ·</span>
          {cc.sectors.map((sec, i) => (
            <span key={i} style={{
              padding: '6px 14px', borderRadius: 999, border: `1px solid ${F.lineStrong}`,
              color: F.textDim, fontSize: 12, fontWeight: 500, fontFamily: 'var(--font-body)',
              opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(10px)',
              transition: `opacity .6s ${0.1 + i * 0.06}s, transform .6s ${0.1 + i * 0.06}s`
            }}>{sec}</span>
          ))}
        </div>
      </div>

      {/* FEATURED — Tasty Control con imagen real */}
      <div style={{ maxWidth: 1280, margin: '0 auto 32px', position: 'relative' }}>
        <div className="pf-featured-wrap">
          <div style={{
            background: F.surface, borderRadius: 33, padding: '56px 56px',
            display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 64, alignItems: 'center',
            position: 'relative', overflow: 'hidden'
          }}>
            {/* scan line */}
            <div style={{
              position: 'absolute', left: 0, right: 0, height: 1,
              background: `linear-gradient(90deg, transparent, ${F.accent}, transparent)`,
              animation: 'finalScan 5s linear infinite', opacity: 0.35, pointerEvents: 'none'
            }} />
            <div style={{ position: 'relative' }}>
              <div style={{
                display: 'inline-block', padding: '5px 14px', borderRadius: 999, marginBottom: 24,
                background: 'linear-gradient(135deg, #2199ea 20%, #137dc5)', color: '#fff',
                fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
                fontFamily: 'var(--font-body)', boxShadow: `0 6px 18px ${F.accentGlow}`
              }}>{cc.featuredTag}</div>
              <h3 style={{
                fontFamily: 'var(--font-heading)', fontSize: 'clamp(30px, 3.4vw, 46px)',
                fontWeight: 500, lineHeight: 1.08, margin: 0, color: F.text, letterSpacing: '-0.02em'
              }}>{caso.title}</h3>
              <p style={{ color: F.textDim, fontSize: 16, lineHeight: 1.7, margin: '28px 0 32px' }}>{caso.desc}</p>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 36 }}>
                {caso.tags.map((t, i) => (
                  <span key={i} style={{
                    padding: '6px 14px', borderRadius: 999, border: `1px solid ${F.lineStrong}`,
                    fontSize: 12, color: F.textDim, fontWeight: 500, fontFamily: 'var(--font-body)'
                  }}>{t}</span>
                ))}
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24, paddingTop: 32, borderTop: `1px solid ${F.line}` }}>
                {caso.metrics.map((m, i) => (
                  <div key={i} style={{
                    opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(20px)',
                    transition: `all .8s ${i * 0.15}s cubic-bezier(.16,.84,.3,1)`
                  }}>
                    <div style={{ fontFamily: 'var(--font-heading)', fontSize: 38, color: F.accent, letterSpacing: '-0.02em', fontWeight: 500 }}>{m.k}</div>
                    <div style={{ fontSize: 12, color: F.textMute, marginTop: 8 }}>{m.v}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* real image */}
            <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 340 }}>
              <div style={{
                position: 'absolute', width: '85%', height: '70%', borderRadius: '50%',
                background: `radial-gradient(circle, ${F.accentGlow}, transparent 70%)`,
                filter: 'blur(50px)', opacity: 0.7
              }} />
              <img src="assets/product-tasty-control.png" alt="Tasty Control"
                style={{
                  position: 'relative', width: '100%', maxWidth: 640, height: 'auto', display: 'block',
                  objectFit: 'contain',
                  filter: 'drop-shadow(0 30px 60px rgba(0,0,0,0.6))',
                  animation: 'pfFloat 7s ease-in-out infinite'
                }} />
              <div style={{
                position: 'absolute', top: 8, right: 8, padding: '7px 14px', borderRadius: 999,
                background: 'rgba(33,153,234,0.16)', border: `1px solid ${F.accent}`, backdropFilter: 'blur(6px)',
                fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 600, color: F.accent
              }}>● Semifinalista Naves 2024</div>
            </div>
          </div>
        </div>
      </div>

      {/* GRID de 5 + CTA */}
      <div style={{
        maxWidth: 1280, margin: '0 auto', display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)', gap: 20
      }}>
        {cc.items.map((it, i) => (
          <PortfolioCard key={it.key} item={it} index={i} cardCta={cc.cardCta} />
        ))}
        <PortfolioCtaCard cta={cc.cta} index={cc.items.length} />
      </div>
    </section>
  );
}

Object.assign(window, { FPortfolio, PortfolioCard, PortfolioCtaCard, CASOS_CONTENT });