{"id":4369,"date":"2026-09-04T23:02:57","date_gmt":"2026-09-04T23:02:57","guid":{"rendered":"https:\/\/jpdirector.net\/?page_id=4369"},"modified":"2026-09-04T23:15:33","modified_gmt":"2026-09-04T23:15:33","slug":"clon-ia","status":"publish","type":"page","link":"https:\/\/jpdirector.net\/en\/clon-ia\/","title":{"rendered":"Clon IA"},"content":{"rendered":"\n
\n
\n\n\nJP Director<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@400;600;700;800&family=Manrope:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n:root{\n --bg:#0a0a0c;\n --fg:#fff;\n --muted:#b8bcc6;\n --accent:#3A83F6;\n --glow:rgba(58,131,246,.45);\n}\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\nhtml,body{background:var(--bg);color:var(--fg);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}\nbody{\n background:\n radial-gradient(1200px 600px at 80% -10%,rgba(58,131,246,.08),transparent 60%),\n radial-gradient(900px 500px at -10% 110%,rgba(58,131,246,.05),transparent 60%),\n var(--bg);\n}\n.section{width:100%;max-width:1280px;margin:0 auto;padding:48px 20px 80px}\n.headline{\n font-family:'Sora',sans-serif;font-weight:600;\n font-size:clamp(28px,7vw,44px);line-height:1.12;\n letter-spacing:-.015em;text-align:center;margin-bottom:14px;\n}\n.headline b{font-weight:800}\n.headline .accent{color:var(--accent)}\n.subheadline{\n text-align:center;color:var(--muted);\n font-size:clamp(13px,3vw,15px);line-height:1.55;\n max-width:520px;margin:0 auto 24px;\n}\n\n\/* \u2500\u2500 STAGE \u2500\u2500 *\/\n.stage{\n width:100%;max-width:560px;margin:0 auto 44px;position:relative;\n}\n\n.phase{ transition:opacity .5s ease; }\n.phase-A{ position:relative; z-index:1; }\n.phase-B{ position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none; }\n.stage.is-B .phase-A{ opacity:0; pointer-events:none; }\n.stage.is-B .phase-B{ opacity:1; pointer-events:auto; }\n\n\/* \u2500\u2500 PHASE A: 4 B&W cards \u2500\u2500 *\/\n.cards4{\n display:flex;gap:3%;align-items:flex-start;width:100%;\n position:relative;\n}\n.card4{\n flex:1 1 0;\n aspect-ratio:9\/16;border-radius:10px;overflow:hidden;\n background:#1a1b1f;\n box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.04);\n transition:transform .7s cubic-bezier(.6,.05,.2,1), opacity .5s ease;\n will-change:transform,opacity;\n}\n.card4 img{width:100%;height:100%;object-fit:cover;display:block}\n\n\/* Cards 2,3,4 slide left behind card 1 when stage prepares to switch *\/\n.stage.collapsing .card4-2{ transform:translateX(-103%) scale(.9); opacity:0; }\n.stage.collapsing .card4-3{ transform:translateX(-206%) scale(.9); opacity:0; }\n.stage.collapsing .card4-4{ transform:translateX(-309%) scale(.9); opacity:0; }\n\n\/* \u2500\u2500 PHASE B: 3 columns, each card SAME WIDTH as a phase-A card \u2500\u2500 *\/\n\/*\n Phase A card width = (100% - 3 gaps*3%) \/ 4 \u2248 22.75% of stage.\n In phase B we keep each face at that same width, and center the 3 columns.\n*\/\n.cols3{\n display:flex;\n justify-content:center;\n gap:8%;\n align-items:flex-start;\n width:100%;\n}\n.col{\n display:flex;flex-direction:column;align-items:center;\n flex:0 0 22.75%; \/* exact width of a phase-A card *\/\n position:relative;\n}\n.col-label{\n display:flex;align-items:center;gap:4px;\n font-size:clamp(7px,1.7vw,9px);font-weight:600;\n color:var(--muted);margin-bottom:6px;\n letter-spacing:.01em;white-space:nowrap;\n align-self:flex-start;\n}\n.col-label svg{width:10px;height:10px;opacity:.7;flex-shrink:0}\n\n.col-face{\n width:100%;aspect-ratio:9\/16;border-radius:10px;overflow:hidden;\n background:#1a1b1f;position:relative;\n box-shadow:0 12px 32px rgba(0,0,0,.5);\n}\n.col-face img,.col-face video{width:100%;height:100%;object-fit:cover;display:block}\n\n.col-color .col-face{\n box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 0 1px rgba(58,131,246,.3),0 0 26px rgba(58,131,246,.18);\n}\n.col-video .col-face{\n box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 0 1px rgba(58,131,246,.4),0 0 34px rgba(58,131,246,.22);\n}\n\n\/* prompt box under center column \u2014 wide & short (spills beyond column) *\/\n.prompt-box{\n margin-top:8px;\n background:rgba(20,21,25,.92);backdrop-filter:blur(8px);\n border:1px solid rgba(58,131,246,.25);border-radius:8px;\n padding:7px 9px;\n font-size:clamp(6.5px,1.5vw,8px);line-height:1.4;\n color:var(--muted);position:relative;\n width:230%;\n margin-left:-65%;\n}\n.prompt-box::before{\n content:\"\";position:absolute;left:12px;top:-1px;width:20px;height:1.5px;\n background:var(--accent);box-shadow:0 0 6px var(--glow);\n}\n\n.views-badge{\n position:absolute;top:7px;left:7px;z-index:3;\n display:flex;align-items:center;gap:4px;\n background:rgba(0,0,0,.45);padding:3px 6px;border-radius:30px;\n font-size:7px;font-weight:600;color:#fff;backdrop-filter:blur(6px);\n}\n.views-badge svg{width:8px;height:8px}\n\n.cols-svg{\n position:absolute;top:0;left:0;width:100%;height:100%;\n pointer-events:none;z-index:5;overflow:visible;\n}\n\n\/* \u2500\u2500 CTA ROW \u2500\u2500 *\/\n.cta-row{\n display:grid;grid-template-columns:1fr 1.3fr;\n gap:20px;align-items:center;\n max-width:560px;margin:0 auto;\n}\n.cta-row > *:first-child{ display:flex; justify-content:center; }\n\n.cta-button{\n appearance:none;border:none;\n background:var(--accent);color:#fff;\n font-family:'Sora',sans-serif;font-weight:700;\n font-size:clamp(15px,3.8vw,19px);line-height:1.2;\n text-align:center;cursor:pointer;\n padding:16px 28px;\n border-radius:40px;\n display:inline-flex;align-items:center;justify-content:center;gap:8px;\n box-shadow:0 6px 28px rgba(58,131,246,.45);\n transition:transform .2s ease, box-shadow .2s ease, background .2s ease;\n letter-spacing:.01em;\n white-space:nowrap;\n width:100%;\n max-width:300px;\n}\n.cta-button:hover{\n background:#2f74e8;\n transform:translateY(-3px);\n box-shadow:0 12px 40px rgba(58,131,246,.6),0 0 0 4px rgba(58,131,246,.18);\n}\n.cta-button:active{transform:translateY(0)}\n.cta-button .arrow{\n display:inline-flex;color:#fff;font-size:.85em;flex-shrink:0;\n transition:transform .2s ease;\n}\n.cta-button:hover .arrow{transform:translateX(3px)}\n.cta-button strong{font-weight:800}\n\n.cta-video{\n position:relative;aspect-ratio:9\/16;border-radius:14px;\n overflow:hidden;background:#000;\n box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04);\n}\n.cta-video video{width:100%;height:100%;object-fit:cover;display:block}\n.cta-video .views-badge{top:12px;left:12px;font-size:11px;padding:6px 10px}\n.cta-video .views-badge svg{width:12px;height:12px}\n.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}\n.play-overlay svg{width:48px;height:48px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));opacity:.85}\n.vid-actions{position:absolute;right:12px;bottom:12px;display:flex;gap:10px;color:#fff}\n.vid-actions svg{width:18px;height:18px}\n\n@media(min-width:900px){\n .section{padding:80px 60px 120px}\n .headline{font-size:clamp(42px,4vw,54px);margin-bottom:20px}\n .subheadline{font-size:16px;max-width:640px;margin-bottom:28px}\n .stage{max-width:920px;margin-bottom:64px}\n .cards4{gap:4%}\n .col{flex-basis:22%}\n .cols3{gap:9%}\n .prompt-box{font-size:9.5px;padding:10px 12px;width:215%;margin-left:-57%}\n .col-label{font-size:10px}\n .views-badge{font-size:9px}\n .views-badge svg{width:10px;height:10px}\n .cta-row{max-width:920px;grid-template-columns:1fr 1fr;gap:56px}\n .cta-button{font-size:20px;padding:20px 44px;max-width:360px}\n .cta-video{max-width:360px}\n}\n@media(prefers-reduced-motion:reduce){\n .phase,.card4{transition:none!important}\n}\n<\/style>\n\n\n<section class=\"section\">\n <h1 class=\"headline\">\n Contenido <b>Audiovisual<\/b><br>\n con <b>IA<\/b> para marcas <span class=\"accent\">que<br>quieren destacar<\/span>\n <\/h1>\n <p class=\"subheadline\">\n Videos, reels y anuncios de alto impacto creados con inteligencia artificial,\n edici\u00f3n profesional y estrategia de marketing.\n <\/p>\n\n <div class=\"stage\" id=\"stage\" aria-hidden=\"true\">\n\n <!-- PHASE A: 4 B&W cards -->\n <div class=\"phase phase-A\" id=\"phaseA\">\n <div class=\"cards4\">\n <div class=\"card4 card4-1\"><img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/I1.png\" alt=\"\"><\/div>\n <div class=\"card4 card4-2\"><img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/I2.png\" alt=\"\"><\/div>\n <div class=\"card4 card4-3\"><img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/I3.png\" alt=\"\"><\/div>\n <div class=\"card4 card4-4\"><img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/i4.png\" alt=\"\"><\/div>\n <\/div>\n <\/div>\n\n <!-- PHASE B: 3 columns -->\n <div class=\"phase phase-B\" id=\"phaseB\">\n <svg class=\"cols-svg\" id=\"colsSvg\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><\/svg>\n <div class=\"cols3\" id=\"cols3\">\n\n <div class=\"col col-bw\" id=\"colBw\">\n <div class=\"col-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"><\/rect><circle cx=\"9\" cy=\"9\" r=\"2\"><\/circle><path d=\"m21 15-3.5-3.5L9 20\"><\/path><\/svg>\n Generador de im\u00e1genes\n <\/div>\n <div class=\"col-face\">\n <img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/I1.png\" alt=\"\">\n <\/div>\n <\/div>\n\n <div class=\"col col-color\" id=\"colColor\">\n <div class=\"col-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"><\/rect><circle cx=\"9\" cy=\"9\" r=\"2\"><\/circle><path d=\"m21 15-3.5-3.5L9 20\"><\/path><\/svg>\n Generador de im\u00e1genes\n <\/div>\n <div class=\"col-face\">\n <img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/I1.3.png\" alt=\"\">\n <\/div>\n <div class=\"prompt-box\">\n Genera un paneo lento de izquierda a derecha. El personaje expulsa con su brazo derecho rob\u00f3tico un l\u00e1ser de plasma azul hacia el frente. La iluminaci\u00f3n se oscurece y queda un tono azulado en el ambiente. Las l\u00e1mparas de arriba hacen corto y explotan.\n <\/div>\n <\/div>\n\n <div class=\"col col-video\" id=\"colVideo\">\n <div class=\"col-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m22 8-6 4 6 4V8z\"><\/path><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"><\/rect><\/svg>\n Generador de Video\n <\/div>\n <div class=\"col-face\">\n <div class=\"views-badge\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n 8.1m views\n <\/div>\n <video id=\"stageVideo\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/VIDEO-MUESTRA-CORTO.mp4\" muted=\"\" playsinline=\"\" webkit-playsinline=\"\" preload=\"auto\" loop=\"\"><\/video>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"cta-row\">\n <button class=\"cta-button\" type=\"button\" onclick=\"window.location.href='https:\/\/jpdirector.net\/contact'\">\n <span class=\"arrow\">\u25b6<\/span>Quiero contenido <strong>con IA<\/strong>\n<\/button> <div class=\"cta-video\">\n <div class=\"views-badge\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\n 8.1m views\n <\/div>\n <video id=\"ctaVideo\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/VIDEO-MUESTRA-CORTO.mp4\" autoplay=\"\" muted=\"\" loop=\"\" playsinline=\"\" webkit-playsinline=\"\" preload=\"auto\"><\/video>\n <div class=\"play-overlay\">\n <svg viewBox=\"0 0 24 24\" fill=\"rgba(255,255,255,0.95)\"><path d=\"M8 5v14l11-7z\"><\/path><\/svg>\n <\/div>\n <div class=\"vid-actions\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"><\/path><\/svg>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 2L11 13\"><\/path><path d=\"M22 2l-7 20-4-9-9-4 20-7z\"><\/path><\/svg>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n\/*\n LOOP (14s):\n 0\u20132s Phase A: 4 B&W cards static\n 2\u20132.7s Cards 2,3,4 slide behind card 1 (collapsing)\n 2.7\u201311s Phase B: 3 columns, video plays\n 11\u201311.5s Back: phase B fades out\n 11.5\u201314s Phase A static again\n*\/\nconst LOOP = 14000;\nconst T_COLLAPSE = 2000; \/\/ start sliding cards behind card1\nconst T_B = 2700; \/\/ switch to phase B\nconst T_BA = 11000; \/\/ start returning to phase A\nconst T_A = 11600; \/\/ fully back\n\nconst stage = document.getElementById('stage');\nconst stageVideo = document.getElementById('stageVideo');\nconst ctaVideo = document.getElementById('ctaVideo');\nconst colBw = document.getElementById('colBw');\nconst colColor= document.getElementById('colColor');\nconst colVideo= document.getElementById('colVideo');\nconst colsSvg = document.getElementById('colsSvg');\nconst cols3 = document.getElementById('cols3');\n\nlet stateKey='A', cycleStart=performance.now();\n\nfunction drawConnectors(){\n colsSvg.innerHTML='';\n const wrapRect = cols3.getBoundingClientRect();\n const rBw = colBw.querySelector('.col-face').getBoundingClientRect();\n const rCo = colColor.querySelector('.col-face').getBoundingClientRect();\n const rVi = colVideo.querySelector('.col-face').getBoundingClientRect();\n const toLocal = (r) => ({\n left:r.left-wrapRect.left, right:r.right-wrapRect.left,\n midY:r.top-wrapRect.top + r.height*0.42,\n });\n const a=toLocal(rBw), b=toLocal(rCo), c=toLocal(rVi);\n addLine(a.right,a.midY,b.left,b.midY);\n addLine(b.right,b.midY,c.left,c.midY);\n}\nfunction addLine(x1,y1,x2,y2){\n const C='#3A83F6', midX=(x1+x2)\/2;\n const path=document.createElementNS('http:\/\/www.w3.org\/2000\/svg','path');\n path.setAttribute('d',`M${x1},${y1} C${midX},${y1} ${midX},${y2} ${x2},${y2}`);\n path.setAttribute('fill','none');path.setAttribute('stroke',C);\n path.setAttribute('stroke-width','1.6');path.setAttribute('opacity','0.7');\n colsSvg.appendChild(path);\n [[x1,y1],[x2,y2]].forEach(([x,y])=>{\n const d=document.createElementNS('http:\/\/www.w3.org\/2000\/svg','circle');\n d.setAttribute('cx',x);d.setAttribute('cy',y);d.setAttribute('r','3');\n d.setAttribute('fill',C);d.setAttribute('opacity','0.8');colsSvg.appendChild(d);\n });\n}\n\nfunction setState(s){\n if(s===stateKey) return;\n stateKey=s;\n if(s==='collapse'){\n stage.classList.add('collapsing');\n } else if(s==='B'){\n stage.classList.add('collapsing'); \/\/ keep cards hidden\n stage.classList.add('is-B');\n requestAnimationFrame(()=>requestAnimationFrame(drawConnectors));\n try{stageVideo.currentTime=0}catch(e){}\n const p=stageVideo.play(); if(p&&p.catch)p.catch(()=>{});\n } else if(s==='A'){\n stage.classList.remove('is-B');\n stage.classList.remove('collapsing');\n stageVideo.pause(); try{stageVideo.currentTime=0}catch(e){}\n }\n}\n\nfunction tick(now){\n const t=(now-cycleStart)%LOOP;\n if(t < T_COLLAPSE) setState('A');\n else if(t < T_B) setState('collapse');\n else if(t < T_BA) setState('B');\n else setState('A');\n requestAnimationFrame(tick);\n}\nrequestAnimationFrame(tick);\n\nwindow.addEventListener('resize',()=>{ if(stateKey==='B') drawConnectors(); });\n\nfunction tryPlayAll(){\n [ctaVideo,stageVideo].forEach(v=>{if(!v)return;v.muted=true;v.setAttribute('playsinline','')});\n if(ctaVideo){const p=ctaVideo.play();if(p&&p.catch)p.catch(()=>{})}\n}\ndocument.addEventListener('DOMContentLoaded',tryPlayAll);\nwindow.addEventListener('load',tryPlayAll);\n['click','touchstart','scroll'].forEach(ev=>document.addEventListener(ev,()=>{\n if(ctaVideo&&ctaVideo.paused){const p=ctaVideo.play();if(p&&p.catch)p.catch(()=>{})}\n},{once:true,passive:true}));\n<\/script>\n\n\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n<title>JP Director \u2014 Panel 2<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@400;600;700;800&family=Manrope:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n\/* \u2500\u2500 All styles scoped to .panel2 \u2014 no global pollution \u2500\u2500 *\/\n\n.panel2 {\n background-color: #F5F5F5;\n background-image: radial-gradient(circle, #c8cdd6 1.2px, transparent 1.2px);\n background-size: 22px 22px;\n font-family: 'Manrope', sans-serif;\n -webkit-font-smoothing: antialiased;\n color: #111113;\n}\n\n.panel2 *,\n.panel2 *::before,\n.panel2 *::after {\n box-sizing: border-box;\n}\n\n\/* \u2500\u2500 SECTION \u2500\u2500 *\/\n.panel2 .p2-section {\n width: 100%;\n max-width: 480px;\n margin: 0 auto;\n padding: 52px 24px 60px;\n position: relative;\n}\n\n\/* \u2500\u2500 HEADLINE \u2500\u2500 *\/\n.panel2 .p2-headline {\n font-family: 'Sora', sans-serif;\n font-weight: 700;\n font-size: clamp(26px, 6.5vw, 36px);\n line-height: 1.15;\n letter-spacing: -.02em;\n color: #111113;\n margin-bottom: 28px;\n}\n.panel2 .p2-headline .p2-accent { color: #3A83F6; }\n.panel2 .p2-headline .p2-tag {\n display: inline-block;\n background: #3A83F6;\n color: #fff;\n font-family: 'Sora', sans-serif;\n font-weight: 800;\n font-size: clamp(13px, 3.2vw, 16px);\n letter-spacing: .04em;\n padding: 4px 12px 5px;\n border-radius: 5px;\n margin-top: 4px;\n vertical-align: middle;\n}\n\n\/* \u2500\u2500 CANVAS for SVG lines \u2500\u2500 *\/\n.panel2 .p2-canvas {\n position: relative;\n width: 100%;\n}\n.panel2 #p2LinesSvg {\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n pointer-events: none;\n overflow: visible;\n z-index: 1;\n}\n\n\/* \u2500\u2500 IMAGE CARDS \u2500\u2500 *\/\n.panel2 .p2-card {\n position: absolute;\n background: transparent;\n transition: transform .3s ease;\n z-index: 2;\n cursor: default;\n}\n.panel2 .p2-card img {\n display: block;\n width: 100%;\n height: auto;\n object-fit: contain;\n filter: drop-shadow(0 8px 22px rgba(0,0,0,.18)) drop-shadow(0 2px 6px rgba(0,0,0,.10));\n}\n\n\/* Label chip *\/\n.panel2 .p2-label {\n position: absolute;\n top: -11px; left: 10px;\n background: rgba(255,255,255,.95);\n border: 1px solid rgba(0,0,0,.08);\n border-radius: 20px;\n padding: 3px 10px;\n font-size: 10px;\n font-weight: 600;\n color: #111113;\n display: flex; align-items: center; gap: 5px;\n box-shadow: 0 1px 6px rgba(0,0,0,.08);\n white-space: nowrap;\n z-index: 3;\n letter-spacing: .02em;\n font-family: 'Manrope', sans-serif;\n}\n.panel2 .p2-label svg { width: 10px; height: 10px; opacity: .6; }\n\n\/* Side icon strip *\/\n.panel2 .p2-icons {\n position: absolute;\n right: -13px; top: 40%;\n transform: translateY(-50%);\n display: flex; flex-direction: column; gap: 7px;\n z-index: 4;\n}\n.panel2 .p2-icons .p2-ico {\n width: 26px; height: 26px;\n background: #fff;\n border-radius: 7px;\n box-shadow: 0 2px 8px rgba(0,0,0,.12);\n display: flex; align-items: center; justify-content: center;\n border: 1px solid rgba(0,0,0,.06);\n}\n.panel2 .p2-icons .p2-ico svg { width: 13px; height: 13px; opacity: .55; }\n\n\/* \u2500\u2500 FLOAT ANIMATIONS \u2500\u2500 *\/\n@keyframes p2floatA {\n 0%,100% { transform: translateY(0px) rotate(-.5deg); }\n 50% { transform: translateY(-9px) rotate(.5deg); }\n}\n@keyframes p2floatB {\n 0%,100% { transform: translateY(0px) rotate(.5deg); }\n 50% { transform: translateY(-7px) rotate(-.6deg); }\n}\n@keyframes p2floatC {\n 0%,100% { transform: translateY(0px) rotate(-.3deg); }\n 50% { transform: translateY(-11px) rotate(.4deg); }\n}\n.panel2 #p2CardMain { animation: p2floatA 4.5s ease-in-out infinite; }\n.panel2 #p2CardProd { animation: p2floatB 5.2s ease-in-out infinite; }\n.panel2 #p2CardChar { animation: p2floatC 3.9s ease-in-out infinite; }\n\n\/* \u2500\u2500 CTA \u2500\u2500 *\/\n.panel2 .p2-cta-wrap {\n display: flex; align-items: center; justify-content: center;\n margin-top: 36px;\n}\n.panel2 .p2-cta-btn {\n appearance: none;\n border: none;\n background: #3A83F6;\n color: #fff;\n font-family: 'Sora', sans-serif;\n font-weight: 700;\n font-size: clamp(16px, 4vw, 20px);\n line-height: 1.2;\n text-align: center;\n cursor: pointer;\n padding: 16px 36px;\n border-radius: 40px;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n box-shadow: 0 6px 28px rgba(58,131,246,0.40);\n transition: transform .2s ease, box-shadow .2s ease, background .2s ease;\n}\n.panel2 .p2-cta-btn:hover {\n background: #2f74e8;\n transform: translateY(-2px);\n box-shadow: 0 10px 36px rgba(58,131,246,0.55), 0 0 0 4px rgba(58,131,246,0.15);\n}\n.panel2 .p2-cta-btn:active { transform: translateY(0); }\n.panel2 .p2-cta-btn .p2-arrow {\n font-size: .85em;\n flex-shrink: 0;\n transition: transform .2s ease;\n}\n.panel2 .p2-cta-btn:hover .p2-arrow { transform: translateX(3px); }\n.panel2 .p2-cta-btn strong { font-weight: 800; }\n\n\/* \u2500\u2500 DESKTOP \u2500\u2500 *\/\n@media (min-width: 800px) {\n .panel2 .p2-section { max-width: 900px; padding: 72px 60px 80px; }\n .panel2 .p2-headline { font-size: clamp(38px, 4.5vw, 52px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .panel2 #p2CardMain,\n .panel2 #p2CardProd,\n .panel2 #p2CardChar { animation: none !important; }\n}\n<\/style>\n\n\n\n<!-- \u2591\u2591 PANEL 2 \u2014 scoped wrapper \u2591\u2591 -->\n<div class=\"panel2\">\n <div class=\"p2-section\">\n\n <!-- HEADLINE -->\n <h2 class=\"p2-headline\">\n T\u00fa <span class=\"p2-accent\">Direcci\u00f3n<\/span>, T\u00fa<br>\n Producto, T\u00fa Personaje<br>\n <span class=\"p2-tag\">O T\u00da MISMO<\/span>\n <\/h2>\n\n <!-- CANVAS: floating images + SVG lines -->\n <div class=\"p2-canvas\" id=\"p2Canvas\">\n\n <svg id=\"p2LinesSvg\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><\/svg>\n\n <!-- Main: Tu Direcci\u00f3n -->\n <div class=\"p2-card\" id=\"p2CardMain\">\n <div class=\"p2-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"><\/rect><path d=\"M3 9h18\"><\/path><path d=\"M9 21V9\"><\/path><\/svg>\n Tu Direcci\u00f3n\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/TU-DIRECCION.png\" alt=\"Tu Direcci\u00f3n\">\n <div class=\"p2-icons\">\n <div class=\"p2-ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><path d=\"M3 9h18\"><\/path><\/svg><\/div>\n <div class=\"p2-ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle><path d=\"M12 8v4l3 3\"><\/path><\/svg><\/div>\n <div class=\"p2-ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line><\/svg><\/div>\n <div class=\"p2-ico\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"18\" cy=\"5\" r=\"3\"><\/circle><circle cx=\"6\" cy=\"12\" r=\"3\"><\/circle><circle cx=\"18\" cy=\"19\" r=\"3\"><\/circle><line x1=\"8.59\" y1=\"13.51\" x2=\"15.42\" y2=\"17.49\"><\/line><line x1=\"15.41\" y1=\"6.51\" x2=\"8.59\" y2=\"10.49\"><\/line><\/svg><\/div>\n <\/div>\n <\/div>\n\n <!-- Producto -->\n <div class=\"p2-card\" id=\"p2CardProd\">\n <div class=\"p2-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><\/svg>\n Tu Producto\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/8fd8b2bc-d984-490e-8b47-a28b84c73159.png\" alt=\"Tu Producto\">\n <\/div>\n\n <!-- Personaje -->\n <div class=\"p2-card\" id=\"p2CardChar\">\n <div class=\"p2-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle><\/svg>\n Tu Personaje\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/PERSONAJE-1.png\" alt=\"Tu Personaje\">\n <\/div>\n\n <\/div><!-- \/p2-canvas -->\n\n <!-- CTA -->\n <div class=\"p2-cta-wrap\">\n <button class=\"p2-cta-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/jpdirector.net\/contact'\">\n <span class=\"p2-arrow\">\u25b6<\/span>\n Quiero contenido<strong>con IA<\/strong>\n<\/button> <\/div>\n\n <\/div>\n<\/div><!-- \/panel2 -->\n\n<script>\n(function(){\n \/*\n All coordinates are in canvas-space (relative to canvas top-left).\n place() stores the rect for each card so drawLines() can read it.\n No getBoundingClientRect \u2014 avoids the scroll-offset mismatch.\n *\/\n\n const RATIO_MAIN = 1971 \/ 1132; \/\/ Tu Direcci\u00f3n tall portrait\n const RATIO_PROD = 1 \/ 1; \/\/ new product image \u2014 approx square; adjust if needed\n const RATIO_CHAR = 535 \/ 1049; \/\/ Tu Personaje wide landscape\n\n const canvas = document.getElementById('p2Canvas');\n const cardMain = document.getElementById('p2CardMain');\n const cardProd = document.getElementById('p2CardProd');\n const cardChar = document.getElementById('p2CardChar');\n const svgEl = document.getElementById('p2LinesSvg');\n\n \/\/ Store placed rects in canvas-space\n const rects = {};\n\n function layout() {\n const W = canvas.offsetWidth;\n\n \/\/ \u2500\u2500 SIZES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n const mainW = Math.round(W * 0.58);\n const mainH = Math.round(mainW * RATIO_MAIN);\n\n const prodW = Math.round(W * 0.36);\n const prodH = Math.round(prodW * RATIO_PROD);\n\n const charW = Math.round(W * 0.62);\n const charH = Math.round(charW * RATIO_CHAR);\n\n \/\/ \u2500\u2500 POSITIONS (canvas-space) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n \/\/ Main: top-right\n const mainL = W - mainW - 16;\n const mainT = 16;\n\n \/\/ Product: bottom-left, below main\n const prodL = 0;\n const prodT = mainT + mainH - Math.round(prodH * 0.1);\n\n \/\/ Character: overlaps diagonally below product\n const charL = Math.round(W * 0.32);\n const charT = prodT + Math.round(prodH * 0.45);\n\n \/\/ Canvas height\n const totalH = charT + charH + 24;\n canvas.style.height = totalH + 'px';\n\n placeCard(cardMain, mainL, mainT, mainW, mainH);\n placeCard(cardProd, prodL, prodT, prodW, prodH);\n placeCard(cardChar, charL, charT, charW, charH);\n\n rects.main = { l: mainL, t: mainT, w: mainW, h: mainH };\n rects.prod = { l: prodL, t: prodT, w: prodW, h: prodH };\n rects.char = { l: charL, t: charT, w: charW, h: charH };\n\n drawLines();\n }\n\n function placeCard(el, left, top, w, h) {\n el.style.left = left + 'px';\n el.style.top = top + 'px';\n el.style.width = w + 'px';\n el.style.height = h + 'px'; \/\/ explicit height keeps rect consistent\n }\n\n \/\/ Get a point on a rect edge \u2014 all in canvas-space\n function pt(r, side, frac) {\n frac = (frac === undefined) ? 0.5 : frac;\n switch (side) {\n case 'top': return { x: r.l + r.w * frac, y: r.t };\n case 'bottom': return { x: r.l + r.w * frac, y: r.t + r.h };\n case 'left': return { x: r.l, y: r.t + r.h * frac };\n case 'right': return { x: r.l + r.w, y: r.t + r.h * frac };\n }\n }\n\n function drawLines() {\n svgEl.innerHTML = '';\n const C = '#3A83F6';\n\n \/\/ Line 1: right edge of Producto \u2192 left edge of Main (horizontal-ish)\n \/\/ Connect the vertical midpoint of prod's right side to Main's left side at same height\n var prodMid = pt(rects.prod, 'right', 0.45);\n var mainEntry = pt(rects.main, 'left', \n (prodMid.y - rects.main.t) \/ rects.main.h\n );\n \/\/ Clamp mainEntry.y to within main rect\n mainEntry.y = Math.max(rects.main.t + 10, Math.min(rects.main.t + rects.main.h - 10, mainEntry.y));\n drawCurve(prodMid, mainEntry, C, 1.8, [5, 4]);\n\n \/\/ Line 2: right edge of Personaje \u2192 bottom-left area of Main\n var charMid = pt(rects.char, 'right', 0.4);\n var mainBot = pt(rects.main, 'left',\n (charMid.y - rects.main.t) \/ rects.main.h\n );\n mainBot.y = Math.max(rects.main.t + 10, Math.min(rects.main.t + rects.main.h - 10, mainBot.y));\n drawCurve(charMid, mainBot, C, 1.8, [5, 4]);\n }\n\n function drawCurve(a, b, color, sw, dash) {\n \/\/ Horizontal S-curve: control points pull horizontally so the line\n \/\/ leaves and arrives horizontally (looks clean, no diagonal chaos)\n var midX = (a.x + b.x) \/ 2;\n var cx1 = midX;\n var cy1 = a.y;\n var cx2 = midX;\n var cy2 = b.y;\n\n var path = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'path');\n path.setAttribute('d', 'M'+a.x+','+a.y+' C'+cx1+','+cy1+' '+cx2+','+cy2+' '+b.x+','+b.y);\n path.setAttribute('fill', 'none');\n path.setAttribute('stroke', color);\n path.setAttribute('stroke-width', sw);\n path.setAttribute('stroke-dasharray', dash.join(' '));\n path.setAttribute('stroke-linecap', 'round');\n path.setAttribute('opacity', '0.65');\n svgEl.appendChild(path);\n\n \/\/ Endpoint dots\n [a, b].forEach(function(p) {\n var c = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n c.setAttribute('cx', p.x);\n c.setAttribute('cy', p.y);\n c.setAttribute('r', '4');\n c.setAttribute('fill', color);\n c.setAttribute('opacity', '0.75');\n svgEl.appendChild(c);\n });\n }\n\n window.addEventListener('load', layout);\n window.addEventListener('resize', layout);\n document.addEventListener('DOMContentLoaded', layout);\n})();\n<\/script>\n\n\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n<title>JP Director \u2014 Clones Digitales<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:ital,wght@0,400;0,600;0,700;0,800;1,400;1,700&family=Manrope:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PANEL 4 \u2014 Clones Digitales\n All styles scoped to .panel4 \u2014 zero global CSS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n.panel4 {\n --accent: #3A83F6;\n --accent-glow: rgba(58,131,246,0.35);\n --bg: #e8eaed;\n --fg: #111113;\n --muted: #5a6272;\n --card-radius: 12px;\n --thumb-radius: 10px;\n\n background: linear-gradient(180deg, #d8dce3 0%, #eaecef 30%, #f4f5f7 60%, #ffffff 100%);\n color: var(--fg);\n font-family: 'Manrope', sans-serif;\n -webkit-font-smoothing: antialiased;\n position: relative;\n overflow: hidden;\n}\n\n.panel4 *, .panel4 *::before, .panel4 *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n\/* \u2500\u2500 INNER \u2500\u2500 *\/\n.panel4 .p4-inner {\n width: 100%;\n max-width: 480px;\n margin: 0 auto;\n padding: 52px 20px 60px;\n}\n\n\/* \u2500\u2500 HEADLINE \u2500\u2500 *\/\n.panel4 .p4-title {\n font-family: 'Sora', sans-serif;\n font-weight: 800;\n font-size: clamp(34px, 9vw, 52px);\n line-height: 1.05;\n letter-spacing: -0.025em;\n text-align: center;\n color: var(--fg);\n margin-bottom: 10px;\n}\n.panel4 .p4-title .p4-blue { color: var(--accent); }\n\n\/* \u2500\u2500 SUBTITLE \u2500\u2500 *\/\n.panel4 .p4-sub {\n font-family: 'Sora', sans-serif;\n font-weight: 600;\n font-size: clamp(17px, 4.5vw, 22px);\n text-align: center;\n color: var(--fg);\n margin-bottom: 16px;\n line-height: 1.3;\n}\n.panel4 .p4-sub .p4-blue { color: var(--accent); }\n\n\/* \u2500\u2500 DESCRIPTION \u2500\u2500 *\/\n.panel4 .p4-desc {\n font-size: clamp(13px, 3.2vw, 15px);\n line-height: 1.6;\n color: var(--muted);\n text-align: center;\n max-width: 360px;\n margin: 0 auto 32px;\n}\n.panel4 .p4-desc strong { color: var(--fg); font-weight: 700; }\n\n\/* \u2500\u2500 THUMBNAIL GRID \u2500\u2500 *\/\n.panel4 .p4-grid {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-bottom: 24px;\n}\n.panel4 .p4-row {\n display: flex;\n gap: 8px;\n justify-content: center;\n}\n\/* Mobile: row1 = 3 items, row2 = 2 items *\/\n.panel4 .p4-row-1 { \/* 3 cols *\/ }\n.panel4 .p4-row-2 { \/* 2 cols, centered *\/ }\n\n.panel4 .p4-thumb {\n position: relative;\n flex: 0 0 calc((100% - 16px) \/ 3); \/* 3 items with 2 gaps *\/\n aspect-ratio: 9 \/ 16;\n border-radius: var(--thumb-radius);\n overflow: hidden;\n cursor: pointer;\n background: #1a1b20;\n transition: transform 300ms ease, opacity 300ms ease, box-shadow 300ms ease;\n opacity: 0.78;\n transform: scale(1);\n}\n\/* 2nd row: 2 items each same width as above *\/\n.panel4 .p4-row-2 .p4-thumb {\n flex: 0 0 calc((100% - 16px) \/ 3);\n}\n.panel4 .p4-thumb img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n pointer-events: none;\n}\n\n\/* ACTIVE thumbnail state *\/\n.panel4 .p4-thumb.p4-active {\n opacity: 1;\n transform: scale(1.05);\n box-shadow:\n 0 0 0 2.5px var(--accent),\n 0 6px 24px rgba(58,131,246,0.35);\n z-index: 2;\n}\n\n\/* Filename label on thumbnail *\/\n.panel4 .p4-thumb-label {\n position: absolute;\n bottom: 6px; left: 6px;\n background: rgba(0,0,0,0.55);\n backdrop-filter: blur(4px);\n color: #fff;\n font-size: 8px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: 4px;\n letter-spacing: 0.03em;\n pointer-events: none;\n}\n\n\/* \u2500\u2500 VIRTUAL CURSOR \u2500\u2500 *\/\n.panel4 .p4-cursor {\n position: fixed;\n pointer-events: none;\n z-index: 9999;\n transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1),\n top 500ms cubic-bezier(0.4, 0, 0.2, 1);\n \/* SVG cursor \u2014 hand pointer style *\/\n width: 28px;\n height: 36px;\n display: none; \/* shown by JS when ready *\/\n}\n.panel4 .p4-cursor svg {\n width: 28px;\n height: 36px;\n filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.35));\n}\n\n\/* \u2500\u2500 VIDEO SECTION \u2500\u2500 *\/\n.panel4 .p4-video-section {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n margin-bottom: 28px;\n}\n.panel4 .p4-video-wrap {\n position: relative;\n width: 100%;\n max-width: 300px;\n aspect-ratio: 9 \/ 16;\n border-radius: 20px;\n overflow: hidden;\n background: #000;\n box-shadow:\n 0 0 0 2px rgba(255,255,255,0.6),\n 0 24px 60px rgba(0,0,0,0.3),\n 0 0 0 6px rgba(58,131,246,0.15);\n}\n.panel4 .p4-video-wrap video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n opacity: 1;\n transition: opacity 250ms ease;\n}\n.panel4 .p4-video-wrap video.p4-fading {\n opacity: 0;\n}\n\n\/* CLON IA badge below video *\/\n.panel4 .p4-badge-wrap {\n display: flex;\n justify-content: center;\n margin-top: -1px;\n}\n.panel4 .p4-badge {\n background: #fff;\n border: 2.5px solid var(--fg);\n border-radius: 40px;\n padding: 10px 28px;\n font-family: 'Sora', sans-serif;\n font-weight: 800;\n font-size: clamp(18px, 5vw, 22px);\n letter-spacing: 0.06em;\n color: var(--fg);\n display: inline-flex;\n align-items: center;\n gap: 10px;\n box-shadow: 0 4px 16px rgba(0,0,0,0.1);\n margin-top: 16px;\n}\n.panel4 .p4-badge .p4-badge-blue {\n color: var(--accent);\n}\n\n\/* \u2500\u2500 BOTTOM TEXT \u2500\u2500 *\/\n.panel4 .p4-bottom-text {\n font-family: 'Sora', sans-serif;\n font-style: italic;\n font-weight: 400;\n font-size: clamp(17px, 4.5vw, 22px);\n text-align: center;\n color: var(--fg);\n line-height: 1.4;\n margin-bottom: 32px;\n}\n.panel4 .p4-bottom-text .p4-blue {\n color: var(--accent);\n font-style: italic;\n}\n\n\n\/* \u2500\u2500 DESKTOP \u2500\u2500 *\/\n@media (min-width: 1024px) {\n .panel4 .p4-inner { max-width: 900px; padding: 72px 48px 72px; }\n .panel4 .p4-title { font-size: 64px; }\n .panel4 .p4-sub { font-size: 26px; }\n .panel4 .p4-grid { flex-direction: row; gap: 10px; margin-bottom: 28px; }\n .panel4 .p4-row { flex: 1; gap: 10px; }\n .panel4 .p4-row-1 { flex: 5 }\n .panel4 .p4-row-2 { flex: 0; display: none; }\n .panel4 .p4-thumb { flex: 1; max-width: none; }\n .panel4 .p4-video-section { gap: 32px; align-items: center; }\n .panel4 .p4-video-wrap { max-width: 400px; }\n .panel4 .p4-cta-btn { font-size: 20px; padding: 20px 56px; }\n}\n\n\/* \u2500\u2500 CTA BUTTON \u2014 all screens \u2500\u2500 *\/\n.panel4 .p4-mobile-cta {\n display: flex;\n justify-content: center;\n margin-bottom: 36px;\n}\n.panel4 .p4-cta-btn {\n background: var(--accent);\n color: #fff;\n font-family: 'Sora', sans-serif;\n font-weight: 800;\n font-size: clamp(17px, 4.5vw, 20px);\n padding: 18px 44px;\n border-radius: 40px;\n border: none;\n cursor: pointer;\n box-shadow: 0 6px 28px rgba(58,131,246,0.45);\n transition: transform .2s ease, box-shadow .2s ease, background .2s ease;\n letter-spacing: 0.02em;\n width: 100%;\n max-width: 320px;\n}\n.panel4 .p4-cta-btn:hover {\n background: #2f74e8;\n transform: translateY(-3px);\n box-shadow: 0 12px 40px rgba(58,131,246,0.6), 0 0 0 4px rgba(58,131,246,0.18);\n}\n.panel4 .p4-cta-btn:active { transform: translateY(0); }\n\n\/* prefers-reduced-motion *\/\n@media (prefers-reduced-motion: reduce) {\n .panel4 .p4-thumb { transition: none !important; }\n .panel4 .p4-cursor { display: none !important; }\n .panel4 .p4-video-wrap video { transition: none !important; }\n}\n<\/style>\n\n\n\n<div class=\"panel4\" id=\"panel4\">\n\n <!-- Virtual cursor (moved by JS) -->\n <div class=\"p4-cursor\" id=\"p4Cursor\">\n <svg viewBox=\"0 0 28 36\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <!-- Hand pointer cursor -->\n <path d=\"M8 28V10.5C8 9.67 8.67 9 9.5 9C10.33 9 11 9.67 11 10.5V20\" stroke=\"#111\" stroke-width=\"1.4\" fill=\"white\"><\/path>\n <path d=\"M11 20V15.5C11 14.67 11.67 14 12.5 14C13.33 14 14 14.67 14 15.5V20\" stroke=\"#111\" stroke-width=\"1.4\" fill=\"white\"><\/path>\n <path d=\"M14 20V16.5C14 15.67 14.67 15 15.5 15C16.33 15 17 15.67 17 16.5V20\" stroke=\"#111\" stroke-width=\"1.4\" fill=\"white\"><\/path>\n <path d=\"M17 20.5V18.5C17 17.67 17.67 17 18.5 17C19.33 17 20 17.67 20 18.5V24C20 27.31 17.31 30 14 30H13C10.24 30 8 27.76 8 25V25\" stroke=\"#111\" stroke-width=\"1.4\" fill=\"white\"><\/path>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.5 8C8.12 8 7 9.12 7 10.5V25C7 28.31 9.69 31 13 31H14C17.87 31 21 27.87 21 24V18.5C21 17.12 19.88 16 18.5 16C18.16 16 17.84 16.07 17.55 16.2C17.22 15.48 16.42 15 15.5 15C15.16 15 14.84 15.07 14.55 15.2C14.22 14.48 13.42 14 12.5 14C12.16 14 11.84 14.07 11.55 14.2C11.22 13.48 10.42 13 9.5 13C8.12 13 7 14.12 7 15.5V10.5C7 9.12 8.12 8 9.5 8Z\" fill=\"white\" stroke=\"#222\" stroke-width=\"1.2\"><\/path>\n <\/svg>\n <\/div>\n\n <div class=\"p4-inner\">\n\n <!-- TITLE -->\n <h2 class=\"p4-title\">\n Clones <span class=\"p4-blue\">Digitales<\/span>\n <\/h2>\n\n <!-- SUBTITLE -->\n <p class=\"p4-sub\">\n Graba <span class=\"p4-blue\">una vez.<\/span> Habla para <span class=\"p4-blue\">siempre.<\/span>\n <\/p>\n\n <!-- DESCRIPTION -->\n <p class=\"p4-desc\">\n Con un solo pago mensual, te grabas una vez y generas <strong>m\u00faltiples videos con edici\u00f3n profesional<\/strong> para escalar tu contenido en redes.\n <\/p>\n\n <!-- THUMBNAIL GRID -->\n <div class=\"p4-grid\" id=\"p4Grid\">\n <!-- Row 1: items 0,1,2 (mobile) \/ all 5 on desktop via JS -->\n <div class=\"p4-row p4-row-1\" id=\"p4Row1\">\n <div class=\"p4-thumb\" data-idx=\"0\" id=\"p4Thumb0\">\n <img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/JP-DESPIDOS-frame.png\" alt=\"\" loading=\"eager\">\n <span class=\"p4-thumb-label\">JP-DESPIDOS.mp4<\/span>\n <\/div>\n <div class=\"p4-thumb\" data-idx=\"1\" id=\"p4Thumb1\">\n <img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/JPDIRECTOR-LINKEDIN-frame.png\" alt=\"\" loading=\"eager\">\n <span class=\"p4-thumb-label\">JP-LINKEDIN.mp4<\/span>\n <\/div>\n <div class=\"p4-thumb\" data-idx=\"2\" id=\"p4Thumb2\">\n <img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/video-jp-9-frame.png\" alt=\"\" loading=\"eager\">\n <span class=\"p4-thumb-label\">LAS-AGENCIAS.mp4<\/span>\n <\/div>\n <\/div>\n <!-- Row 2: items 3,4 (mobile only) -->\n <div class=\"p4-row p4-row-2\" id=\"p4Row2\">\n <div class=\"p4-thumb\" data-idx=\"3\" id=\"p4Thumb3\">\n <img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/buscando-mejores-influencers-frame.png\" alt=\"\" loading=\"lazy\">\n <span class=\"p4-thumb-label\">INFLUENCERS.mp4<\/span>\n <\/div>\n <div class=\"p4-thumb\" data-idx=\"4\" id=\"p4Thumb4\">\n <img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/orlando-florida-talento-frame.png\" alt=\"\" loading=\"lazy\">\n <span class=\"p4-thumb-label\">ORLANDO.mp4<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- VIDEO SECTION -->\n <div class=\"p4-video-section\">\n <div class=\"p4-video-wrap\" id=\"p4VideoWrap\">\n <video id=\"p4Video\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/JP-DESPIDOS.mp4\" autoplay=\"\" muted=\"\" loop=\"\" playsinline=\"\" webkit-playsinline=\"\" preload=\"auto\">\n <\/video>\n <\/div>\n\n <\/div>\n\n <!-- CLON IA BADGE -->\n <div class=\"p4-badge-wrap\">\n <div class=\"p4-badge\">\n CLON  <span class=\"p4-badge-blue\">IA<\/span>\n <\/div>\n <\/div>\n\n <!-- MOBILE CTA -->\n <div class=\"p4-mobile-cta\" style=\"margin-top:28px\">\n <button class=\"p4-cta-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/jpdirector.net\/contact'\">\n Quiero mi Clon Digital\n<\/button>\n <\/div>\n\n <!-- BOTTOM TEXT -->\n <p class=\"p4-bottom-text\">\n Tu clon no se cansa, no improvisa,<br>\n <span class=\"p4-blue\">no falla.<\/span>\n <\/p>\n\n\n <\/div><!-- \/p4-inner -->\n<\/div><!-- \/panel4 -->\n\n<script>\n(function () {\n 'use strict';\n\n \/* \u2500\u2500 DATA \u2500\u2500 *\/\n const ITEMS = [\n {\n img: 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/JP-DESPIDOS-frame.png',\n src: 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/JP-DESPIDOS.mp4',\n },\n {\n img: 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/JPDIRECTOR-LINKEDIN-frame.png',\n src: 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/JP-LINKEDIN.mp4',\n },\n {\n img: 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/video-jp-9-frame.png',\n src: 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/VIDEO-JP-9-3-LAS-AGENCIAS-DESAPARECER.mp4',\n },\n {\n img: 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/buscando-mejores-influencers-frame.png',\n src: 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/Buscando-los-mejores-influence-orlando-florida.mp4',\n },\n {\n img: 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/orlando-florida-talento-frame.png',\n src: 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/06\/orlando-florida-talento.mp4',\n },\n ];\n\n \/* \u2500\u2500 ELEMENTS \u2500\u2500 *\/\n const cursor = document.getElementById('p4Cursor');\n const video = document.getElementById('p4Video');\n const row1 = document.getElementById('p4Row1');\n const row2 = document.getElementById('p4Row2');\n const panel = document.getElementById('panel4');\n\n const thumbEls = ITEMS.map((_, i) => document.getElementById('p4Thumb' + i));\n\n \/* \u2500\u2500 PRELOAD VIDEOS \u2500\u2500 *\/\n const videoCache = {};\n ITEMS.forEach((item, i) => {\n const v = document.createElement('video');\n v.src = item.src;\n v.muted = true;\n v.loop = true;\n v.playsInline = true;\n v.setAttribute('playsinline', '');\n v.preload = 'auto';\n videoCache[i] = v;\n });\n\n \/* \u2500\u2500 DESKTOP GRID REBUILD \u2500\u2500 *\/\n function isDesktop() { return window.innerWidth >= 1024; }\n\n function rebuildGrid() {\n if (isDesktop()) {\n \/\/ Move all thumbs into row1, hide row2\n thumbEls.forEach(t => row1.appendChild(t));\n row2.style.display = 'none';\n thumbEls.forEach(t => {\n t.style.flex = '1';\n t.style.maxWidth = 'none';\n });\n } else {\n \/\/ Mobile: row1 = 0,1,2 \/ row2 = 3,4\n row2.style.display = 'flex';\n [0, 1, 2].forEach(i => row1.appendChild(thumbEls[i]));\n [3, 4].forEach(i => row2.appendChild(thumbEls[i]));\n thumbEls.forEach(t => {\n t.style.flex = '';\n t.style.maxWidth = '';\n });\n }\n }\n rebuildGrid();\n window.addEventListener('resize', rebuildGrid);\n\n \/* \u2500\u2500 VIDEO SWAP \u2500\u2500 *\/\n let currentIdx = -1;\n let swapping = false;\n\n function activateItem(idx) {\n if (idx === currentIdx) return;\n\n \/\/ Update thumbnails\n thumbEls.forEach((t, i) => {\n t.classList.toggle('p4-active', i === idx);\n });\n\n \/\/ Swap video with fade\n if (swapping) return;\n swapping = true;\n\n video.classList.add('p4-fading');\n\n setTimeout(() => {\n video.src = ITEMS[idx].src;\n video.load();\n const p = video.play();\n if (p && p.catch) p.catch(() => {});\n video.classList.remove('p4-fading');\n swapping = false;\n }, 250);\n\n currentIdx = idx;\n }\n\n \/* \u2500\u2500 VIRTUAL CURSOR ANIMATION \u2500\u2500 *\/\n const HOVER_DURATION = 2000; \/\/ ms each thumb stays active\n const MOVE_DURATION = 500; \/\/ ms cursor travel time (matches CSS transition)\n\n let cursorIdx = 0;\n let loopTimer = null;\n let moveTimer = null;\n let isVisible = false;\n let animRunning = false;\n\n function getThumbCenter(el) {\n const r = el.getBoundingClientRect();\n return {\n x: r.left + r.width * 0.55,\n y: r.top + r.height * 0.65,\n };\n }\n\n function moveCursorTo(el, onArrived) {\n const { x, y } = getThumbCenter(el);\n cursor.style.left = (x - 8) + 'px';\n cursor.style.top = (y - 4) + 'px';\n \/\/ Wait for transition to finish\n clearTimeout(moveTimer);\n moveTimer = setTimeout(onArrived, MOVE_DURATION + 40);\n }\n\n function doStep() {\n if (!animRunning) return;\n const thumb = thumbEls[cursorIdx];\n\n \/\/ Move cursor to this thumb\n moveCursorTo(thumb, function () {\n if (!animRunning) return;\n \/\/ Activate video\n activateItem(cursorIdx);\n \/\/ Wait hover duration, then move to next\n loopTimer = setTimeout(function () {\n cursorIdx = (cursorIdx + 1) % ITEMS.length;\n doStep();\n }, HOVER_DURATION);\n });\n }\n\n function startAnimation() {\n if (animRunning) return;\n animRunning = true;\n cursor.style.display = 'block';\n \/\/ Place cursor at first thumb immediately (no transition on first place)\n cursor.style.transition = 'none';\n const { x, y } = getThumbCenter(thumbEls[0]);\n cursor.style.left = (x - 8) + 'px';\n cursor.style.top = (y - 4) + 'px';\n \/\/ Re-enable transition after first placement\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n cursor.style.transition = '';\n doStep();\n });\n });\n }\n\n function stopAnimation() {\n animRunning = false;\n clearTimeout(loopTimer);\n clearTimeout(moveTimer);\n cursor.style.display = 'none';\n }\n\n \/* \u2500\u2500 INTERSECTION OBSERVER \u2014 start when panel enters viewport \u2500\u2500 *\/\n const observer = new IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting && !animRunning) {\n \/\/ Small delay so layout is settled\n setTimeout(startAnimation, 300);\n } else if (!entry.isIntersecting && animRunning) {\n stopAnimation();\n cursorIdx = 0;\n currentIdx = -1;\n }\n });\n }, { threshold: 0.2 });\n\n observer.observe(panel);\n\n \/* \u2500\u2500 AUTOPLAY video \u2500\u2500 *\/\n function tryPlay() {\n video.muted = true;\n const p = video.play();\n if (p && p.catch) p.catch(() => {});\n }\n document.addEventListener('DOMContentLoaded', tryPlay);\n window.addEventListener('load', tryPlay);\n ['click', 'touchstart'].forEach(ev =>\n document.addEventListener(ev, tryPlay, { once: true, passive: true })\n );\n\n \/* \u2500\u2500 Manual thumb click \u2500\u2500 *\/\n thumbEls.forEach((el, i) => {\n el.addEventListener('click', function () {\n activateItem(i);\n });\n });\n\n})();\n<\/script>\n\n\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n<title>JP Director \u2014 Panel 3<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@400;600;700;800&family=Manrope:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PANEL 3 \u2014 all styles scoped to .panel3\n No global html\/body\/root pollution\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n.panel3 {\n background: #0b0c0f;\n color: #ffffff;\n font-family: 'Manrope', sans-serif;\n -webkit-font-smoothing: antialiased;\n overflow: hidden;\n}\n\n.panel3 *, .panel3 *::before, .panel3 *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n\/* \u2500\u2500 INNER WRAPPER \u2500\u2500 *\/\n.panel3 .p3-inner {\n width: 100%;\n max-width: 520px;\n margin: 0 auto;\n padding: 52px 22px 0;\n}\n\n\/* \u2500\u2500 HEADLINE \u2500\u2500 *\/\n.panel3 .p3-headline {\n font-family: 'Sora', sans-serif;\n font-weight: 700;\n font-size: clamp(26px, 6.8vw, 38px);\n line-height: 1.13;\n letter-spacing: -0.02em;\n color: #ffffff;\n margin-bottom: 32px;\n}\n.panel3 .p3-headline .p3-accent {\n color: #3A83F6;\n}\n\n\/* \u2500\u2500 SUBTITLE CHIPS (small) \u2500\u2500 *\/\n.panel3 .p3-chip {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: transparent;\n border: 1.5px solid rgba(255,255,255,0.15);\n border-radius: 8px;\n padding: 7px 14px 7px 10px;\n font-family: 'Manrope', sans-serif;\n font-size: 13px;\n font-weight: 500;\n color: #fff;\n margin-bottom: 18px;\n white-space: nowrap;\n}\n.panel3 .p3-chip .p3-chip-icon {\n width: 14px; height: 14px;\n opacity: 0.5;\n flex-shrink: 0;\n}\n.panel3 .p3-chip strong { font-weight: 800; }\n\n\/* \u2500\u2500 COLUMN HEADER CHIPS (larger, blue border) \u2500\u2500 *\/\n.panel3 .p3-col-chip {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: rgba(58,131,246,0.10);\n border: 2px solid #3A83F6;\n border-radius: 10px;\n padding: 10px 18px 10px 14px;\n font-family: 'Sora', sans-serif;\n font-size: clamp(14px, 3.5vw, 17px);\n font-weight: 600;\n color: #fff;\n margin-bottom: 14px;\n white-space: nowrap;\n box-shadow: 0 0 20px rgba(58,131,246,0.18);\n letter-spacing: 0.01em;\n}\n.panel3 .p3-col-chip svg {\n width: 16px; height: 16px;\n flex-shrink: 0;\n stroke: #3A83F6;\n}\n.panel3 .p3-col-chip strong { font-weight: 800; }\n\n\/* \u2500\u2500 SOUND TOGGLE BUTTON \u2500\u2500 *\/\n.panel3 .p3-sound-btn {\n position: absolute;\n bottom: 12px; right: 12px;\n z-index: 5;\n width: 36px; height: 36px;\n background: rgba(0,0,0,0.55);\n backdrop-filter: blur(6px);\n border: 1px solid rgba(255,255,255,0.15);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n transition: background .2s ease, transform .15s ease;\n color: #fff;\n}\n.panel3 .p3-sound-btn:hover {\n background: rgba(58,131,246,0.5);\n transform: scale(1.08);\n}\n.panel3 .p3-sound-btn svg { width: 16px; height: 16px; pointer-events: none; }\n.panel3 .p3-sound-btn .p3-icon-muted { display: block; }\n.panel3 .p3-sound-btn .p3-icon-sound { display: none; }\n.panel3 .p3-sound-btn.p3-unmuted .p3-icon-muted { display: none; }\n.panel3 .p3-sound-btn.p3-unmuted .p3-icon-sound { display: block; }\n\n\/* \u2500\u2500 CTA BUTTON \u2500\u2500 *\/\n.panel3 .p3-cta-wrap {\n padding: 36px 22px 52px;\n display: flex;\n justify-content: center;\n}\n.panel3 .p3-cta-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n background: #3A83F6;\n color: #fff;\n font-family: 'Sora', sans-serif;\n font-weight: 800;\n font-size: clamp(18px, 4.5vw, 22px);\n letter-spacing: 0.01em;\n padding: 18px 48px;\n border-radius: 14px;\n border: none;\n cursor: pointer;\n box-shadow: 0 4px 24px rgba(58,131,246,0.45);\n transition: transform .2s ease, box-shadow .2s ease, background .2s ease;\n width: 100%;\n max-width: 340px;\n}\n.panel3 .p3-cta-btn:hover {\n background: #2f74e8;\n transform: translateY(-2px);\n box-shadow: 0 8px 36px rgba(58,131,246,0.55), 0 0 0 4px rgba(58,131,246,0.15);\n}\n.panel3 .p3-cta-btn:active { transform: translateY(0); }\n\n\/* \u2500\u2500 TWO-COLUMN SECTION \u2500\u2500 *\/\n.panel3 .p3-cols {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n align-items: start;\n position: relative;\n margin-bottom: 40px;\n}\n\n\/* \u2500\u2500 LEFT COLUMN: floating photos \u2500\u2500 *\/\n.panel3 .p3-col-left {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n.panel3 .p3-photos {\n position: relative;\n width: 100%;\n \/* height set by JS *\/\n}\n\n\/* Each floating photo card *\/\n.panel3 .p3-photo {\n position: absolute;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3);\n background: #1a1b20;\n z-index: 2;\n}\n.panel3 .p3-photo img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\/* Photo label *\/\n.panel3 .p3-photo-label {\n position: absolute;\n top: -10px; left: 8px;\n background: rgba(255,255,255,0.08);\n backdrop-filter: blur(8px);\n border: 1px solid rgba(255,255,255,0.12);\n border-radius: 20px;\n padding: 2px 9px;\n font-size: 9px;\n font-weight: 600;\n color: rgba(255,255,255,0.75);\n letter-spacing: 0.03em;\n white-space: nowrap;\n font-family: 'Manrope', sans-serif;\n display: flex; align-items: center; gap: 4px;\n z-index: 3;\n}\n.panel3 .p3-photo-label svg { width: 8px; height: 8px; opacity: 0.6; }\n\n\/* Float keyframes \u2014 unique per card *\/\n@keyframes p3floatA {\n 0%,100% { transform: translateY(0) rotate(-0.4deg); }\n 50% { transform: translateY(-8px) rotate(0.5deg); }\n}\n@keyframes p3floatB {\n 0%,100% { transform: translateY(0) rotate(0.5deg); }\n 50% { transform: translateY(-6px) rotate(-0.4deg); }\n}\n@keyframes p3floatC {\n 0%,100% { transform: translateY(0) rotate(-0.3deg); }\n 50% { transform: translateY(-10px) rotate(0.3deg); }\n}\n.panel3 #p3Lugar { animation: p3floatA 4.8s ease-in-out infinite; }\n.panel3 #p3Objeto { animation: p3floatB 5.4s ease-in-out infinite; }\n.panel3 #p3Persona { animation: p3floatC 4.1s ease-in-out infinite; }\n\n\/* \u2500\u2500 SVG LINES between columns \u2500\u2500 *\/\n.panel3 #p3Svg {\n position: absolute;\n top: 0; left: 0;\n width: 100%; height: 100%;\n pointer-events: none;\n overflow: visible;\n z-index: 1;\n}\n\n\/* \u2500\u2500 RIGHT COLUMN: result video \u2500\u2500 *\/\n.panel3 .p3-col-right {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 12px;\n}\n\n.panel3 .p3-video-wrap {\n width: 100%;\n border-radius: 12px;\n overflow: hidden;\n background: #0a0a0d;\n box-shadow:\n 0 0 0 1px rgba(58,131,246,0.2),\n 0 12px 40px rgba(0,0,0,0.6),\n 0 0 40px rgba(58,131,246,0.08);\n position: relative;\n aspect-ratio: 9\/16;\n}\n.panel3 .p3-video-wrap video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n\/* \u2500\u2500 CAROUSELS \u2500\u2500 *\/\n.panel3 .p3-carousels {\n width: 100%;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding-bottom: 52px;\n \/* extend full bleed past inner padding *\/\n margin-left: calc(-22px);\n width: calc(100% + 44px);\n \/* for desktop, re-override in media query *\/\n}\n\n.panel3 .p3-track-wrap {\n overflow: hidden;\n width: 100%;\n}\n\n.panel3 .p3-track {\n display: flex;\n gap: 6px;\n width: max-content;\n will-change: transform;\n}\n\n\/* Row 1 scrolls left, row 2 scrolls right *\/\n.panel3 .p3-track.p3-ltr {\n animation: p3scrollLeft 32s linear infinite;\n}\n.panel3 .p3-track.p3-rtl {\n animation: p3scrollRight 36s linear infinite;\n}\n\n@keyframes p3scrollLeft {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n}\n@keyframes p3scrollRight {\n 0% { transform: translateX(-50%); }\n 100% { transform: translateX(0); }\n}\n\n.panel3 .p3-track-item {\n flex-shrink: 0;\n width: 80px; \/* 1080:1920 = 9:16 \u2192 80\u00d7142 *\/\n height: 142px;\n border-radius: 7px;\n overflow: hidden;\n background: #1a1b20;\n}\n.panel3 .p3-track-item img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n\/* \u2500\u2500 DESKTOP \u2500\u2500 *\/\n@media (min-width: 800px) {\n .panel3 .p3-inner { max-width: 900px; padding: 72px 60px 0; }\n .panel3 .p3-headline { font-size: clamp(38px, 4.5vw, 52px); }\n .panel3 .p3-cols { gap: 24px; }\n .panel3 .p3-track-item { width: 110px; height: 196px; }\n .panel3 .p3-carousels {\n margin-left: calc(-60px);\n width: calc(100% + 120px);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .panel3 #p3Lugar,\n .panel3 #p3Objeto,\n .panel3 #p3Persona { animation: none !important; }\n .panel3 .p3-track.p3-ltr,\n .panel3 .p3-track.p3-rtl { animation: none !important; }\n}\n<\/style>\n\n\n\n<!-- \u2591\u2591 PANEL 3 \u2591\u2591 -->\n<div class=\"panel3\">\n <div class=\"p3-inner\">\n\n <!-- \u2500\u2500 HEADLINE \u2500\u2500 -->\n <h2 class=\"p3-headline\">\n De una foto real a una<br>\n <span class=\"p3-accent\">producci\u00f3n visual<br>profesional<\/span>\n <\/h2>\n\n <!-- \u2500\u2500 TWO COLUMNS \u2500\u2500 -->\n <div class=\"p3-cols\" id=\"p3Cols\">\n\n <!-- SVG lines layer (positioned over the grid) -->\n <svg id=\"p3Svg\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><\/svg>\n\n <!-- LEFT: Fotos Reales -->\n <div class=\"p3-col-left\">\n <div class=\"p3-col-chip\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"><\/rect><path d=\"M3 9h18\"><\/path><path d=\"M9 21V9\"><\/path><\/svg>\n Fotos <strong>Reales<\/strong>\n <\/div>\n\n <!-- Floating photos container -->\n <div class=\"p3-photos\" id=\"p3Photos\">\n <div class=\"p3-photo\" id=\"p3Lugar\">\n <div class=\"p3-photo-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\n Tu Lugar\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/IMG_6649-scaled.jpg\" alt=\"Tu Lugar\">\n <\/div>\n <div class=\"p3-photo\" id=\"p3Objeto\">\n <div class=\"p3-photo-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><\/svg>\n Tu Objeto\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/9.png\" alt=\"Tu Objeto\">\n <\/div>\n <div class=\"p3-photo\" id=\"p3Persona\">\n <div class=\"p3-photo-label\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle><\/svg>\n Tu Personaje\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/IMG_6660-scaled.jpg\" alt=\"Tu Personaje\">\n <\/div>\n <\/div>\n <\/div>\n\n <!-- RIGHT: Resultado con IA -->\n <div class=\"p3-col-right\" id=\"p3ColRight\">\n <div class=\"p3-col-chip\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/polygon><\/svg>\n Resultado <strong>con IA<\/strong>\n <\/div>\n <div class=\"p3-video-wrap\">\n <video id=\"p3MainVideo\" src=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/Diseno-sin-titulo.mp4\" autoplay=\"\" muted=\"\" loop=\"\" playsinline=\"\" webkit-playsinline=\"\" preload=\"auto\">\n <\/video>\n <button class=\"p3-sound-btn\" id=\"p3SoundBtn\" aria-label=\"Activar sonido\" title=\"Activar\/silenciar\">\n <!-- Muted icon -->\n <svg class=\"p3-icon-muted\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"><\/polygon>\n <line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\"><\/line><line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\"><\/line>\n <\/svg>\n <!-- Sound icon -->\n <svg class=\"p3-icon-sound\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"><\/polygon>\n <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"><\/path><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n <\/div><!-- \/p3-cols -->\n\n <!-- \u2500\u2500 CAROUSEL LABEL \u2500\u2500 -->\n <div class=\"p3-chip\" style=\"margin-bottom:14px\">\n <svg class=\"p3-chip-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"><\/rect><path d=\"M16 3H8\"><\/path><path d=\"M12 3v4\"><\/path><\/svg>\n Tu StoryBoard\n <\/div>\n\n <\/div><!-- \/p3-inner -->\n\n <!-- \u2500\u2500 CAROUSELS (full bleed) \u2500\u2500 -->\n <div class=\"p3-carousels\" id=\"p3Carousels\">\n\n <!-- Row 1: left-to-right scroll -->\n <div class=\"p3-track-wrap\">\n <div class=\"p3-track p3-ltr\" id=\"p3Track1\"><\/div>\n <\/div>\n\n <!-- Row 2: right-to-left scroll -->\n <div class=\"p3-track-wrap\">\n <div class=\"p3-track p3-rtl\" id=\"p3Track2\"><\/div>\n <\/div>\n\n <\/div>\n\n <!-- \u2500\u2500 CTA BUTTON \u2500\u2500 -->\n <div class=\"p3-cta-wrap\">\n <button class=\"p3-cta-btn\" type=\"button\" onclick=\"window.location.href='https:\/\/jpdirector.net\/contact'\">\n Empieza <strong>Ahora<\/strong>\n<\/button>\n <\/div>\n\n<\/div><!-- \/panel3 -->\n\n<script>\n(function () {\n\n \/* \u2500\u2500 CAROUSEL IMAGES \u2500\u2500 *\/\n const allImgs = [\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/1.jpg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/11.jpeg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/10.jpeg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/9.jpeg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/14.jpeg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/12.jpeg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/6.jpeg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/7.jpeg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/8.jpeg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/16.jpg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/15.jpg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/13.jpg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/5.jpg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/4.jpg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/3.jpg',\n 'https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/2.jpg',\n ];\n\n function buildTrack(trackEl, imgs) {\n \/\/ Double the array so seamless loop works\n const doubled = [...imgs, ...imgs];\n doubled.forEach(src => {\n const item = document.createElement('div');\n item.className = 'p3-track-item';\n const img = document.createElement('img');\n img.src = src;\n img.alt = '';\n img.loading = 'lazy';\n item.appendChild(img);\n trackEl.appendChild(item);\n });\n }\n\n buildTrack(document.getElementById('p3Track1'), allImgs);\n buildTrack(document.getElementById('p3Track2'), [...allImgs].reverse());\n\n \/* \u2500\u2500 PHOTO LAYOUT \u2500\u2500 *\/\n \/\/ Image real dimensions (px):\n \/\/ Lugar: 1707 \u00d7 2560 \u2192 ratio 2560\/1707 \u2248 1.500\n \/\/ Objeto: 1008 \u00d7 1808 \u2192 ratio 1808\/1008 \u2248 1.794\n \/\/ Persona: 1707 \u00d7 2560 \u2192 ratio 2560\/1707 \u2248 1.500\n\n const RATIO_L = 2560 \/ 1707;\n const RATIO_O = 1808 \/ 1008;\n const RATIO_P = 2560 \/ 1707;\n\n const photos = document.getElementById('p3Photos');\n const elLugar = document.getElementById('p3Lugar');\n const elObjeto = document.getElementById('p3Objeto');\n const elPerson = document.getElementById('p3Persona');\n const svgEl = document.getElementById('p3Svg');\n const colsEl = document.getElementById('p3Cols');\n const colRight = document.getElementById('p3ColRight');\n\n function layoutPhotos() {\n const W = photos.offsetWidth;\n\n \/\/ Card widths\n const lW = Math.round(W * 0.72); const lH = Math.round(lW * RATIO_L);\n const oW = Math.round(W * 0.44); const oH = Math.round(oW * RATIO_O);\n const pW = Math.round(W * 0.68); const pH = Math.round(pW * RATIO_P);\n\n \/\/ Positions \u2014 staggered cascade\n const lLeft = 0; const lTop = 0;\n const oLeft = W - oW; const oTop = Math.round(lH * 0.28);\n const pLeft = 6; const pTop = Math.round(lH * 0.52);\n\n const totalH = pTop + pH + 16;\n photos.style.height = totalH + 'px';\n\n place(elLugar, lLeft, lTop, lW, lH);\n place(elObjeto, oLeft, oTop, oW, oH);\n place(elPerson, pLeft, pTop, pW, pH);\n\n \/\/ Draw SVG lines from left photos to right column video\n drawLines({ l: lLeft, t: lTop, w: lW, h: lH },\n { l: oLeft, t: oTop, w: oW, h: oH },\n { l: pLeft, t: pTop, w: pW, h: pH });\n }\n\n function place(el, left, top, w, h) {\n el.style.position = 'absolute';\n el.style.left = left + 'px';\n el.style.top = top + 'px';\n el.style.width = w + 'px';\n el.style.height = h + 'px';\n }\n\n function drawLines(rL, rO, rP) {\n svgEl.innerHTML = '';\n\n \/\/ The SVG is positioned over .p3-cols, so we need right-column x offset\n const colsRect = colsEl.getBoundingClientRect();\n const rightRect = colRight.getBoundingClientRect();\n const photosRect = photos.getBoundingClientRect();\n\n \/\/ x offset of right column relative to colsEl\n const rxBase = rightRect.left - colsRect.left;\n \/\/ y offset of photos relative to colsEl\n const pyBase = photosRect.top - colsRect.top;\n\n \/\/ Destination: left edge of right column, at ~40% height of video\n const videoH = colRight.offsetHeight;\n const destX = rxBase;\n const destY = pyBase + videoH * 0.45;\n\n const C = '#3A83F6';\n const pts = [\n { x: rL.l + rL.w, y: pyBase + rL.t + rL.h * 0.5 },\n { x: rO.l + rO.w * 0.9, y: pyBase + rO.t + rO.h * 0.35 },\n { x: rP.l + rP.w, y: pyBase + rP.t + rP.h * 0.5 },\n ];\n\n pts.forEach((src, i) => {\n const dash = i === 1 ? [4, 4] : [5, 4];\n const sw = i === 1 ? 1.4 : 1.6;\n addCurve(src, { x: destX, y: destY + (i - 1) * 18 }, C, sw, dash);\n });\n\n \/\/ Junction dot at destination\n dot(destX, destY, C, 4);\n }\n\n function addCurve(a, b, color, sw, dash) {\n const dx = b.x - a.x, dy = b.y - a.y;\n const cx1 = a.x + dx * 0.5;\n const cy1 = a.y;\n const cx2 = a.x + dx * 0.5;\n const cy2 = b.y;\n\n const path = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'path');\n path.setAttribute('d', `M${a.x},${a.y} C${cx1},${cy1} ${cx2},${cy2} ${b.x},${b.y}`);\n path.setAttribute('fill', 'none');\n path.setAttribute('stroke', color);\n path.setAttribute('stroke-width', sw);\n path.setAttribute('stroke-dasharray', dash.join(' '));\n path.setAttribute('stroke-linecap', 'round');\n path.setAttribute('opacity', '0.6');\n svgEl.appendChild(path);\n\n dot(a.x, a.y, color, 3);\n }\n\n function dot(x, y, color, r) {\n const c = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n c.setAttribute('cx', x); c.setAttribute('cy', y);\n c.setAttribute('r', r);\n c.setAttribute('fill', color);\n c.setAttribute('opacity', '0.7');\n svgEl.appendChild(c);\n }\n\n \/* \u2500\u2500 AUTOPLAY VIDEO \u2500\u2500 *\/\n function tryPlay(v) {\n if (!v) return;\n v.muted = true;\n v.setAttribute('playsinline', '');\n const p = v.play();\n if (p && p.catch) p.catch(() => {});\n }\n\n function tryPlayAll() {\n document.querySelectorAll('.panel3 video').forEach(tryPlay);\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n layoutPhotos();\n tryPlayAll();\n });\n window.addEventListener('load', () => {\n layoutPhotos();\n tryPlayAll();\n });\n window.addEventListener('resize', layoutPhotos);\n\n ['click', 'touchstart', 'scroll'].forEach(ev =>\n document.addEventListener(ev, tryPlayAll, { once: true, passive: true })\n );\n\n \/* \u2500\u2500 SOUND TOGGLE \u2500\u2500 *\/\n const soundBtn = document.getElementById('p3SoundBtn');\n const mainVideo = document.getElementById('p3MainVideo');\n\n if (soundBtn && mainVideo) {\n soundBtn.addEventListener('click', function () {\n if (mainVideo.muted) {\n mainVideo.muted = false;\n soundBtn.classList.add('p3-unmuted');\n soundBtn.setAttribute('aria-label', 'Silenciar');\n soundBtn.title = 'Silenciar';\n } else {\n mainVideo.muted = true;\n soundBtn.classList.remove('p3-unmuted');\n soundBtn.setAttribute('aria-label', 'Activar sonido');\n soundBtn.title = 'Activar sonido';\n }\n });\n }\n\n})();\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-greenshift-blocks-container alignfull gspb_container gspb_container-gsbp-74bd613\" id=\"gspb_container-id-gsbp-74bd613\"><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":".gspb_container-id-gsbp-74bd613,.gspb_container-id-gsbp-80e865b,.gspb_container-id-gsbp-a6e833f{flex-direction:column;box-sizing:border-box}#gspb_container-id-gsbp-74bd613.gspb_container>p:last-of-type,#gspb_container-id-gsbp-80e865b.gspb_container>p:last-of-type,#gspb_container-id-gsbp-a6e833f.gspb_container>p:last-of-type{margin-bottom:0}#gspb_container-id-gsbp-a6e833f.gspb_container{position:relative;box-sizing:border-box}#gspb_container-id-gsbp-80e865b.gspb_container{position:relative;margin-bottom:0;box-sizing:border-box}#gspb_container-id-gsbp-74bd613.gspb_container{position:relative;box-sizing:border-box}","footnotes":""},"class_list":["post-4369","page","type-page","status-publish","hentry"],"blocksy_meta":{"disable_header":"no","page_structure_type":"type-4","disable_footer":"yes","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Clon IA - JP Director<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jpdirector.net\/en\/clon-ia\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Clon IA - JP Director\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jpdirector.net\/en\/clon-ia\/\" \/>\n<meta property=\"og:site_name\" content=\"JP Director\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/jpdirector\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-04T23:15:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/I1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jpdirector.net\\\/clon-ia\\\/\",\"url\":\"https:\\\/\\\/jpdirector.net\\\/clon-ia\\\/\",\"name\":\"Clon IA - JP Director\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jpdirector.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/jpdirector.net\\\/clon-ia\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/jpdirector.net\\\/clon-ia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/jpdirector.net\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/I1.png\",\"datePublished\":\"2026-09-04T23:02:57+00:00\",\"dateModified\":\"2026-09-04T23:15:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jpdirector.net\\\/clon-ia\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jpdirector.net\\\/clon-ia\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jpdirector.net\\\/clon-ia\\\/#primaryimage\",\"url\":\"https:\\\/\\\/jpdirector.net\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/I1.png\",\"contentUrl\":\"https:\\\/\\\/jpdirector.net\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/I1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jpdirector.net\\\/clon-ia\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/jpdirector.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Clon IA\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jpdirector.net\\\/#website\",\"url\":\"https:\\\/\\\/jpdirector.net\\\/\",\"name\":\"JP Director\",\"description\":\"JP Director\",\"publisher\":{\"@id\":\"https:\\\/\\\/jpdirector.net\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jpdirector.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jpdirector.net\\\/#organization\",\"name\":\"JP Director\",\"url\":\"https:\\\/\\\/jpdirector.net\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jpdirector.net\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jpdirector.net\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/Logo-home-08-1.png\",\"contentUrl\":\"https:\\\/\\\/jpdirector.net\\\/wp-content\\\/uploads\\\/2025\\\/10\\\/Logo-home-08-1.png\",\"width\":330,\"height\":76,\"caption\":\"JP Director\"},\"image\":{\"@id\":\"https:\\\/\\\/jpdirector.net\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/jpdirector\",\"https:\\\/\\\/www.instagram.com\\\/jp.director\\\/?hl=en\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/jpdirector\\\/?locale=en_US\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Clon IA - JP Director","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jpdirector.net\/en\/clon-ia\/","og_locale":"en_US","og_type":"article","og_title":"Clon IA - JP Director","og_url":"https:\/\/jpdirector.net\/en\/clon-ia\/","og_site_name":"JP Director","article_publisher":"https:\/\/www.facebook.com\/jpdirector","article_modified_time":"2026-09-04T23:15:33+00:00","og_image":[{"url":"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/I1.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jpdirector.net\/clon-ia\/","url":"https:\/\/jpdirector.net\/clon-ia\/","name":"Clon IA - JP Director","isPartOf":{"@id":"https:\/\/jpdirector.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jpdirector.net\/clon-ia\/#primaryimage"},"image":{"@id":"https:\/\/jpdirector.net\/clon-ia\/#primaryimage"},"thumbnailUrl":"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/I1.png","datePublished":"2026-09-04T23:02:57+00:00","dateModified":"2026-09-04T23:15:33+00:00","breadcrumb":{"@id":"https:\/\/jpdirector.net\/clon-ia\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jpdirector.net\/clon-ia\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jpdirector.net\/clon-ia\/#primaryimage","url":"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/I1.png","contentUrl":"https:\/\/jpdirector.net\/wp-content\/uploads\/2026\/05\/I1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/jpdirector.net\/clon-ia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/jpdirector.net\/"},{"@type":"ListItem","position":2,"name":"Clon IA"}]},{"@type":"WebSite","@id":"https:\/\/jpdirector.net\/#website","url":"https:\/\/jpdirector.net\/","name":"JP Director","description":"JP Director","publisher":{"@id":"https:\/\/jpdirector.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jpdirector.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jpdirector.net\/#organization","name":"JP Director","url":"https:\/\/jpdirector.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jpdirector.net\/#\/schema\/logo\/image\/","url":"https:\/\/jpdirector.net\/wp-content\/uploads\/2025\/10\/Logo-home-08-1.png","contentUrl":"https:\/\/jpdirector.net\/wp-content\/uploads\/2025\/10\/Logo-home-08-1.png","width":330,"height":76,"caption":"JP Director"},"image":{"@id":"https:\/\/jpdirector.net\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/jpdirector","https:\/\/www.instagram.com\/jp.director\/?hl=en","https:\/\/www.linkedin.com\/in\/jpdirector\/?locale=en_US"]}]}},"_links":{"self":[{"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/pages\/4369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/comments?post=4369"}],"version-history":[{"count":2,"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/pages\/4369\/revisions"}],"predecessor-version":[{"id":4374,"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/pages\/4369\/revisions\/4374"}],"wp:attachment":[{"href":"https:\/\/jpdirector.net\/en\/wp-json\/wp\/v2\/media?parent=4369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}