{"id":1136,"date":"2025-06-23T07:32:51","date_gmt":"2025-06-23T07:32:51","guid":{"rendered":"https:\/\/polisecuador.org\/?page_id=1136"},"modified":"2025-07-10T14:39:09","modified_gmt":"2025-07-10T14:39:09","slug":"generador-imagenes","status":"publish","type":"page","link":"https:\/\/polisecuador.org\/en\/plog\/generador-imagenes\/","title":{"rendered":"Generaci\u00f3n de Imagenes"},"content":{"rendered":"\n[et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb da_disable_devices=\u00bboff|off|off\u00bb global_colors_info=\u00bb{}\u00bb da_is_popup=\u00bboff\u00bb da_exit_intent=\u00bboff\u00bb da_has_close=\u00bbon\u00bb da_alt_close=\u00bboff\u00bb da_dark_close=\u00bboff\u00bb da_not_modal=\u00bbon\u00bb da_is_singular=\u00bboff\u00bb da_with_loader=\u00bboff\u00bb da_has_shadow=\u00bbon\u00bb][et_pb_row _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_code _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><!-- [et_pb_line_break_holder] --><link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"><!-- [et_pb_line_break_holder] --><link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin><!-- [et_pb_line_break_holder] --><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Merriweather:wght@400;700&#038;family=Montserrat:wght@400;600&#038;display=swap\" rel=\"stylesheet\"><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- Estilos CSS espec\u00edficos para el componente --><!-- [et_pb_line_break_holder] --><style><!-- [et_pb_line_break_holder] -->    \/* Aseguramos que las fuentes base no entren en conflicto con otros estilos *\/<!-- [et_pb_line_break_holder] -->    .generador-editorial-container {<!-- [et_pb_line_break_holder] -->        font-family: 'Montserrat', sans-serif;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    .generador-editorial-container .font-serif {<!-- [et_pb_line_break_holder] -->        font-family: 'Merriweather', serif;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    .generador-editorial-container .font-sans {<!-- [et_pb_line_break_holder] -->        font-family: 'Montserrat', sans-serif;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    \/* Clase para el nuevo color de fondo del bot\u00f3n *\/<!-- [et_pb_line_break_holder] -->    .bg-custom-red {<!-- [et_pb_line_break_holder] -->        background-color: #C11731;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    .hover\\:bg-custom-red-dark:hover {<!-- [et_pb_line_break_holder] -->        background-color: #a5152a; \/* Un tono ligeramente m\u00e1s oscuro para el efecto hover *\/<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><\/style><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- ESTRUCTURA HTML DEL GENERADOR --><!-- [et_pb_line_break_holder] --><div class=\"generador-editorial-container w-full max-w-5xl mx-auto bg-white rounded-xl shadow-2xl overflow-hidden flex flex-col lg:flex-row\"><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <!-- Panel de Controles --><!-- [et_pb_line_break_holder] -->    <div class=\"w-full lg:w-1\/3 p-6 md:p-8 bg-gray-50 border-r border-gray-200\"><!-- [et_pb_line_break_holder] -->        <h1 class=\"text-2xl font-bold text-gray-800 font-serif mb-1\">Crea tu Imagen<\/h1><!-- [et_pb_line_break_holder] -->        <pee class=\"text-gray-500 mb-6\">Rellena los campos para generar tu imagen promocional.<\/pee><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        <div class=\"space-y-5\"><!-- [et_pb_line_break_holder] -->            <div><!-- [et_pb_line_break_holder] -->                <label for=\"quote\" class=\"block text-sm font-semibold text-gray-700 mb-1\">Frase de la editorial<\/label><!-- [et_pb_line_break_holder] -->                <textarea id=\"quote\" rows=\"4\" class=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C11731] focus:border-[#C11731] transition\" placeholder=\"Escribe aqu\u00ed la frase m\u00e1s impactante de tu art\u00edculo...\"><\/textarea><!-- [et_pb_line_break_holder] -->            <\/div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            <div><!-- [et_pb_line_break_holder] -->                <label for=\"author\" class=\"block text-sm font-semibold text-gray-700 mb-1\">Nombre del autor<\/label><!-- [et_pb_line_break_holder] -->                <input type=\"text\" id=\"author\" class=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C11731] focus:border-[#C11731] transition\" placeholder=\"Tu Nombre y Apellido\"><!-- [et_pb_line_break_holder] -->            <\/div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            <div><!-- [et_pb_line_break_holder] -->                <label for=\"authorImage\" class=\"block text-sm font-semibold text-gray-700 mb-1\">Imagen del autor<\/label><!-- [et_pb_line_break_holder] -->                <input type=\"file\" id=\"authorImage\" accept=\"image\/*\" class=\"w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-red-50 file:text-[#C11731] hover:file:bg-red-100 transition\"><!-- [et_pb_line_break_holder] -->            <\/div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            <div class=\"pt-4\"><!-- [et_pb_line_break_holder] -->                 <button id=\"downloadBtn\" class=\"w-full bg-custom-red text-white font-bold py-3 px-4 rounded-lg hover:bg-custom-red-dark focus:outline-none focus:ring-4 focus:ring-red-300 transition-all duration-300 transform hover:scale-105\"><!-- [et_pb_line_break_holder] -->                    Descargar Imagen (PNG)<!-- [et_pb_line_break_holder] -->                <\/button><!-- [et_pb_line_break_holder] -->            <\/div><!-- [et_pb_line_break_holder] -->        <\/div><!-- [et_pb_line_break_holder] -->    <\/div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <!-- Previsualizaci\u00f3n en Canvas --><!-- [et_pb_line_break_holder] -->    <div class=\"w-full lg:w-2\/3 p-6 md:p-8 bg-gray-200 flex items-center justify-center\"><!-- [et_pb_line_break_holder] -->        <canvas id=\"canvas\" width=\"1080\" height=\"1080\" class=\"w-full h-auto max-w-full rounded-lg shadow-lg\"><\/canvas><!-- [et_pb_line_break_holder] -->    <\/div><!-- [et_pb_line_break_holder] --><\/div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- SCRIPT DE FUNCIONALIDAD --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    function iniciarGeneradorEditorial() {<!-- [et_pb_line_break_holder] -->        const container = document.querySelector('.generador-editorial-container');<!-- [et_pb_line_break_holder] -->        if (!container) return;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const canvas = container.querySelector('#canvas');<!-- [et_pb_line_break_holder] -->        const ctx = canvas.getContext('2d');<!-- [et_pb_line_break_holder] -->        const quoteInput = container.querySelector('#quote');<!-- [et_pb_line_break_holder] -->        const authorInput = container.querySelector('#author');<!-- [et_pb_line_break_holder] -->        const imageInput = container.querySelector('#authorImage');<!-- [et_pb_line_break_holder] -->        const downloadBtn = container.querySelector('#downloadBtn');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        let authorImage = null;<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        \/\/ --- Carga de im\u00e1genes ---<!-- [et_pb_line_break_holder] -->         let logoImage = new Image();<!-- [et_pb_line_break_holder] -->        logoImage.crossOrigin = \"Anonymous\";<!-- [et_pb_line_break_holder] -->        logoImage.src = 'https:\/\/polisecuador.org\/wp-content\/uploads\/2025\/06\/logo-plog-2-generador.png';<!-- [et_pb_line_break_holder] -->        logoImage.onerror = () => {<!-- [et_pb_line_break_holder] -->             logoImage.src = 'https:\/\/polisecuador.org\/wp-content\/uploads\/2025\/06\/logo-plog-2-generador.png';<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        let backgroundImage = new Image();<!-- [et_pb_line_break_holder] -->        backgroundImage.crossOrigin = \"Anonymous\";<!-- [et_pb_line_break_holder] -->        \/\/ NOTA: La URL anterior no funcionaba. Se ha reemplazado con una imagen de marcador de posici\u00f3n.<!-- [et_pb_line_break_holder] -->        \/\/ Reemplaza la siguiente URL con el enlace directo a tu imagen de fondo.<!-- [et_pb_line_break_holder] -->        backgroundImage.src = 'https:\/\/polisecuador.org\/wp-content\/uploads\/2025\/06\/fondo-2-generador.jpg';<!-- [et_pb_line_break_holder] -->        backgroundImage.onerror = () => {<!-- [et_pb_line_break_holder] -->            console.error(\"No se pudo cargar la imagen de fondo. Se usar\u00e1 un color s\u00f3lido.\");<!-- [et_pb_line_break_holder] -->            drawCanvas(); \/\/ Dibuja con el fondo de fallback<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        \/\/ --- Funciones de dibujo ---<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        function drawCanvas() {<!-- [et_pb_line_break_holder] -->            ctx.clearRect(0, 0, canvas.width, canvas.height);<!-- [et_pb_line_break_holder] -->            <!-- [et_pb_line_break_holder] -->            \/\/ Dibuja la imagen de fondo o un color s\u00f3lido si falla<!-- [et_pb_line_break_holder] -->            if (backgroundImage.complete && backgroundImage.naturalHeight !== 0) {<!-- [et_pb_line_break_holder] -->                ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);<!-- [et_pb_line_break_holder] -->            } else {<!-- [et_pb_line_break_holder] -->                ctx.fillStyle = '#334155'; \/\/ Color de fondo si la imagen no carga<!-- [et_pb_line_break_holder] -->                ctx.fillRect(0, 0, canvas.width, canvas.height);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ Dibuja una capa oscura semitransparente para asegurar la legibilidad del texto<!-- [et_pb_line_break_holder] -->            ctx.fillStyle = \"rgba(0, 0, 0, 0.45)\";<!-- [et_pb_line_break_holder] -->            ctx.fillRect(0, 0, canvas.width, canvas.height);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ Dibuja el resto de los elementos<!-- [et_pb_line_break_holder] -->            if (authorImage) {<!-- [et_pb_line_break_holder] -->                drawAuthorImage(authorImage);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            drawText();<!-- [et_pb_line_break_holder] -->            if (logoImage.complete && logoImage.naturalHeight !== 0) {<!-- [et_pb_line_break_holder] -->                ctx.drawImage(logoImage, canvas.width - 250, canvas.height - 100, 200, 60);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        function drawAuthorImage(img) {<!-- [et_pb_line_break_holder] -->            const size = 200;<!-- [et_pb_line_break_holder] -->            const x = canvas.width - size - 60;<!-- [et_pb_line_break_holder] -->            const y = 60;<!-- [et_pb_line_break_holder] -->            ctx.save();<!-- [et_pb_line_break_holder] -->            ctx.beginPath();<!-- [et_pb_line_break_holder] -->            ctx.arc(x + size \/ 2, y + size \/ 2, size \/ 2, 0, Math.PI * 2, true);<!-- [et_pb_line_break_holder] -->            ctx.closePath();<!-- [et_pb_line_break_holder] -->            ctx.clip();<!-- [et_pb_line_break_holder] -->            const ar = img.width \/ img.height;<!-- [et_pb_line_break_holder] -->            let drawW, drawH, dX, dY;<!-- [et_pb_line_break_holder] -->            if (img.width > img.height) {<!-- [et_pb_line_break_holder] -->                drawH = size;<!-- [et_pb_line_break_holder] -->                drawW = size * ar;<!-- [et_pb_line_break_holder] -->                dX = x - (drawW - size) \/ 2;<!-- [et_pb_line_break_holder] -->                dY = y;<!-- [et_pb_line_break_holder] -->            } else {<!-- [et_pb_line_break_holder] -->                drawW = size;<!-- [et_pb_line_break_holder] -->                drawH = size \/ ar;<!-- [et_pb_line_break_holder] -->                dX = x;<!-- [et_pb_line_break_holder] -->                dY = y - (drawH - size) \/ 2;<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            ctx.drawImage(img, dX, dY, drawW, drawH);<!-- [et_pb_line_break_holder] -->            ctx.restore();<!-- [et_pb_line_break_holder] -->            ctx.beginPath();<!-- [et_pb_line_break_holder] -->            ctx.arc(x + size \/ 2, y + size \/ 2, size \/ 2, 0, Math.PI * 2, true);<!-- [et_pb_line_break_holder] -->            ctx.strokeStyle = '#FFFFFF';<!-- [et_pb_line_break_holder] -->            ctx.lineWidth = 10;<!-- [et_pb_line_break_holder] -->            ctx.stroke();<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        function drawText() {<!-- [et_pb_line_break_holder] -->            const quoteText = quoteInput.value || \"\u201cTu frase memorable va aqu\u00ed. Algo que inspire y capture la esencia de tu mensaje.\u201d\";<!-- [et_pb_line_break_holder] -->            const authorText = authorInput.value || \"Nombre del Autor\";<!-- [et_pb_line_break_holder] -->            const maxWidth = canvas.width - 120;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ Estilo para la frase<!-- [et_pb_line_break_holder] -->            ctx.fillStyle = '#FFFFFF';<!-- [et_pb_line_break_holder] -->            ctx.font = \"bold 64px 'Merriweather', serif\";<!-- [et_pb_line_break_holder] -->            ctx.textAlign = 'left';<!-- [et_pb_line_break_holder] -->            ctx.textBaseline = 'top';<!-- [et_pb_line_break_holder] -->            const quoteHeight = wrapText(ctx, quoteText, 60, 350, maxWidth, 80);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ Estilo para el autor<!-- [et_pb_line_break_holder] -->            ctx.fillStyle = '#e2e8f0';<!-- [et_pb_line_break_holder] -->            ctx.font = \"italic 48px 'Montserrat', sans-serif\";<!-- [et_pb_line_break_holder] -->            ctx.fillText(`\u2014 ${authorText}`, 60, 350 + quoteHeight + 20);<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        function wrapText(context, text, x, y, maxWidth, lineHeight) {<!-- [et_pb_line_break_holder] -->            const words = text.split(' ');<!-- [et_pb_line_break_holder] -->            let line = '';<!-- [et_pb_line_break_holder] -->            let totalHeight = 0;<!-- [et_pb_line_break_holder] -->            let startY = y;<!-- [et_pb_line_break_holder] -->            for (let n = 0; n < words.length; n++) {<!-- [et_pb_line_break_holder] -->                const testLine = line + words[n] + ' ';<!-- [et_pb_line_break_holder] -->                const metrics = context.measureText(testLine);<!-- [et_pb_line_break_holder] -->                const testWidth = metrics.width;<!-- [et_pb_line_break_holder] -->                if (testWidth > maxWidth && n > 0) {<!-- [et_pb_line_break_holder] -->                    context.fillText(line, x, startY);<!-- [et_pb_line_break_holder] -->                    line = words[n] + ' ';<!-- [et_pb_line_break_holder] -->                    startY += lineHeight;<!-- [et_pb_line_break_holder] -->                    totalHeight += lineHeight;<!-- [et_pb_line_break_holder] -->                } else {<!-- [et_pb_line_break_holder] -->                    line = testLine;<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            context.fillText(line, x, startY);<!-- [et_pb_line_break_holder] -->            totalHeight += lineHeight;<!-- [et_pb_line_break_holder] -->            return totalHeight;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        \/\/ --- Event Listeners ---<!-- [et_pb_line_break_holder] -->        quoteInput.addEventListener('input', drawCanvas);<!-- [et_pb_line_break_holder] -->        authorInput.addEventListener('input', drawCanvas);<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        imageInput.addEventListener('change', (e) => {<!-- [et_pb_line_break_holder] -->            const file = e.target.files[0];<!-- [et_pb_line_break_holder] -->            if (file) {<!-- [et_pb_line_break_holder] -->                const reader = new FileReader();<!-- [et_pb_line_break_holder] -->                reader.onload = (event) => {<!-- [et_pb_line_break_holder] -->                    authorImage = new Image();<!-- [et_pb_line_break_holder] -->                    authorImage.onload = () => drawCanvas();<!-- [et_pb_line_break_holder] -->                    authorImage.src = event.target.result;<!-- [et_pb_line_break_holder] -->                };<!-- [et_pb_line_break_holder] -->                reader.readAsDataURL(file);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        downloadBtn.addEventListener('click', () => {<!-- [et_pb_line_break_holder] -->            const dataURL = canvas.toDataURL('image\/png');<!-- [et_pb_line_break_holder] -->            const link = document.createElement('a');<!-- [et_pb_line_break_holder] -->            link.download = `editorial-${authorInput.value.replace(\/\\s+\/g, '_').toLowerCase() || 'promo'}.png`;<!-- [et_pb_line_break_holder] -->            link.href = dataURL;<!-- [et_pb_line_break_holder] -->            document.body.appendChild(link);<!-- [et_pb_line_break_holder] -->            link.click();<!-- [et_pb_line_break_holder] -->            document.body.removeChild(link);<!-- [et_pb_line_break_holder] -->        });<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        \/\/ Redibujar el canvas cuando las im\u00e1genes terminen de cargar<!-- [et_pb_line_break_holder] -->        logoImage.onload = drawCanvas;<!-- [et_pb_line_break_holder] -->        backgroundImage.onload = drawCanvas;<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        drawCanvas(); \/\/ Dibujo inicial por si las im\u00e1genes ya est\u00e1n en cach\u00e9<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->    \/\/ Iniciar el script cuando el DOM est\u00e9 listo<!-- [et_pb_line_break_holder] -->    if (document.readyState === 'loading') {<!-- [et_pb_line_break_holder] -->        document.addEventListener('DOMContentLoaded', iniciarGeneradorEditorial);<!-- [et_pb_line_break_holder] -->    } else {<!-- [et_pb_line_break_holder] -->        iniciarGeneradorEditorial();<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_code _builder_version=\u00bb4.27.4&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;]<div class=\"plog-generator-wrapper\"><!-- [et_pb_line_break_holder] -->    <!-- ESTILOS ENCAPSULADOS --><!-- [et_pb_line_break_holder] -->    <style><!-- [et_pb_line_break_holder] -->        \/* Importar fuentes *\/<!-- [et_pb_line_break_holder] -->        @import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700;900&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .generador-plog-container {<!-- [et_pb_line_break_holder] -->            font-family: 'Roboto', sans-serif;<!-- [et_pb_line_break_holder] -->            width: 100%;<!-- [et_pb_line_break_holder] -->            max-width: 100%;<!-- [et_pb_line_break_holder] -->            margin: 0 auto;<!-- [et_pb_line_break_holder] -->            background-color: white;<!-- [et_pb_line_break_holder] -->            border-radius: 0.75rem;<!-- [et_pb_line_break_holder] -->            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);<!-- [et_pb_line_break_holder] -->            overflow: hidden;<!-- [et_pb_line_break_holder] -->            display: flex;<!-- [et_pb_line_break_holder] -->            flex-direction: column;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .generador-plog-container .font-serif {<!-- [et_pb_line_break_holder] -->            font-family: 'Playfair Display', serif;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .generador-plog-container .font-sans {<!-- [et_pb_line_break_holder] -->            font-family: 'Roboto', sans-serif;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .bg-brand-red {<!-- [et_pb_line_break_holder] -->            background-color: #C11731;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .hover\\:bg-brand-red-dark:hover {<!-- [et_pb_line_break_holder] -->            background-color: #a5152a;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .text-brand-red {<!-- [et_pb_line_break_holder] -->            color: #C11731;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .file\\:bg-brand-red-lightest {<!-- [et_pb_line_break_holder] -->            background-color: #fce8ea;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .hover\\:file\\:bg-brand-red-lighter:hover {<!-- [et_pb_line_break_holder] -->            background-color: #f9dadd;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .focus\\:ring-brand-red {<!-- [et_pb_line_break_holder] -->            --tw-ring-color: #C11731;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .focus\\:border-brand-red:focus {<!-- [et_pb_line_break_holder] -->            border-color: #C11731;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .controls-panel {<!-- [et_pb_line_break_holder] -->            width: 100%;<!-- [et_pb_line_break_holder] -->            padding: 1.5rem;<!-- [et_pb_line_break_holder] -->            background-color: #f9fafb;<!-- [et_pb_line_break_holder] -->            border-right: 1px solid #e5e7eb;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        @media (min-width: 1024px) {<!-- [et_pb_line_break_holder] -->            .plog-generator-wrapper .generador-plog-container {<!-- [et_pb_line_break_holder] -->                flex-direction: row;<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            .plog-generator-wrapper .controls-panel {<!-- [et_pb_line_break_holder] -->                width: 33.333333%;<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .preview-container {<!-- [et_pb_line_break_holder] -->            width: 100%;<!-- [et_pb_line_break_holder] -->            padding: 1.5rem;<!-- [et_pb_line_break_holder] -->            background-color: #f3f4f6;<!-- [et_pb_line_break_holder] -->            display: flex;<!-- [et_pb_line_break_holder] -->            align-items: center;<!-- [et_pb_line_break_holder] -->            justify-content: center;<!-- [et_pb_line_break_holder] -->            position: relative;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        @media (min-width: 1024px) {<!-- [et_pb_line_break_holder] -->            .plog-generator-wrapper .preview-container {<!-- [et_pb_line_break_holder] -->                width: 66.666667%;<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .canvas-wrapper {<!-- [et_pb_line_break_holder] -->            width: 100%;<!-- [et_pb_line_break_holder] -->            max-width: 32rem;<!-- [et_pb_line_break_holder] -->            transition: all 0.3s ease;<!-- [et_pb_line_break_holder] -->            border-radius: 0.5rem;<!-- [et_pb_line_break_holder] -->            overflow: hidden;<!-- [et_pb_line_break_holder] -->            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .loading-overlay {<!-- [et_pb_line_break_holder] -->            position: absolute;<!-- [et_pb_line_break_holder] -->            top: 0;<!-- [et_pb_line_break_holder] -->            left: 0;<!-- [et_pb_line_break_holder] -->            right: 0;<!-- [et_pb_line_break_holder] -->            bottom: 0;<!-- [et_pb_line_break_holder] -->            background: rgba(255, 255, 255, 0.9);<!-- [et_pb_line_break_holder] -->            display: flex;<!-- [et_pb_line_break_holder] -->            align-items: center;<!-- [et_pb_line_break_holder] -->            justify-content: center;<!-- [et_pb_line_break_holder] -->            z-index: 10;<!-- [et_pb_line_break_holder] -->            opacity: 0;<!-- [et_pb_line_break_holder] -->            pointer-events: none;<!-- [et_pb_line_break_holder] -->            transition: opacity 0.3s ease;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .loading-overlay.active {<!-- [et_pb_line_break_holder] -->            opacity: 1;<!-- [et_pb_line_break_holder] -->            pointer-events: all;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .spinner {<!-- [et_pb_line_break_holder] -->            width: 3rem;<!-- [et_pb_line_break_holder] -->            height: 3rem;<!-- [et_pb_line_break_holder] -->            border: 4px solid rgba(193, 23, 49, 0.2);<!-- [et_pb_line_break_holder] -->            border-top: 4px solid #C11731;<!-- [et_pb_line_break_holder] -->            border-radius: 50%;<!-- [et_pb_line_break_holder] -->            animation: spin 1s linear infinite;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        @keyframes spin {<!-- [et_pb_line_break_holder] -->            0% { transform: rotate(0deg); }<!-- [et_pb_line_break_holder] -->            100% { transform: rotate(360deg); }<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .success-message {<!-- [et_pb_line_break_holder] -->            position: fixed;<!-- [et_pb_line_break_holder] -->            bottom: 1.25rem;<!-- [et_pb_line_break_holder] -->            right: 1.25rem;<!-- [et_pb_line_break_holder] -->            background: #C11731;<!-- [et_pb_line_break_holder] -->            color: white;<!-- [et_pb_line_break_holder] -->            padding: 0.75rem 1.5rem;<!-- [et_pb_line_break_holder] -->            border-radius: 0.375rem;<!-- [et_pb_line_break_holder] -->            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);<!-- [et_pb_line_break_holder] -->            transform: translateY(6.25rem);<!-- [et_pb_line_break_holder] -->            opacity: 0;<!-- [et_pb_line_break_holder] -->            transition: all 0.4s ease;<!-- [et_pb_line_break_holder] -->            z-index: 100;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .success-message.show {<!-- [et_pb_line_break_holder] -->            transform: translateY(0);<!-- [et_pb_line_break_holder] -->            opacity: 1;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .file-input {<!-- [et_pb_line_break_holder] -->            transition: all 0.3s ease;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .download-btn {<!-- [et_pb_line_break_holder] -->            background: #C11731;<!-- [et_pb_line_break_holder] -->            transition: all 0.3s ease;<!-- [et_pb_line_break_holder] -->            box-shadow: 0 4px 6px rgba(193, 23, 49, 0.2);<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        .plog-generator-wrapper .download-btn:hover {<!-- [et_pb_line_break_holder] -->            background: #a5152a;<!-- [et_pb_line_break_holder] -->            transform: translateY(-0.125rem);<!-- [et_pb_line_break_holder] -->            box-shadow: 0 6px 12px rgba(193, 23, 49, 0.3);<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    <\/style><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <!-- HTML DEL GENERADOR --><!-- [et_pb_line_break_holder] -->    <div class=\"generador-plog-container\"><!-- [et_pb_line_break_holder] -->        <!-- Panel de Controles --><!-- [et_pb_line_break_holder] -->        <div class=\"controls-panel\"><!-- [et_pb_line_break_holder] -->            <div class=\"flex items-center mb-6\"><!-- [et_pb_line_break_holder] -->                <div class=\"w-10 h-10 bg-[#C11731] rounded-lg flex items-center justify-center mr-3\"><!-- [et_pb_line_break_holder] -->                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6 text-white\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><!-- [et_pb_line_break_holder] -->                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" \/><!-- [et_pb_line_break_holder] -->                    <\/svg><!-- [et_pb_line_break_holder] -->                <\/div><!-- [et_pb_line_break_holder] -->                <div><!-- [et_pb_line_break_holder] -->                    <h1 class=\"text-2xl font-bold text-gray-800 font-serif\">Generador PLOG<\/h1><!-- [et_pb_line_break_holder] -->                    <pee class=\"text-gray-500 text-sm\">Rellena los campos para generar tu imagen promocional.<\/pee><!-- [et_pb_line_break_holder] -->                <\/div><!-- [et_pb_line_break_holder] -->            <\/div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            <div class=\"space-y-6\"><!-- [et_pb_line_break_holder] -->                <div><!-- [et_pb_line_break_holder] -->                    <label for=\"authorImage\" class=\"block text-sm font-semibold text-gray-700 mb-2 flex items-center\"><!-- [et_pb_line_break_holder] -->                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 mr-1 text-[#C11731]\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><!-- [et_pb_line_break_holder] -->                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6v6m0 0v6m0-6h6m-6 0H6\" \/><!-- [et_pb_line_break_holder] -->                        <\/svg><!-- [et_pb_line_break_holder] -->                        Imagen del autor<!-- [et_pb_line_break_holder] -->                    <\/label><!-- [et_pb_line_break_holder] -->                    <input type=\"file\" id=\"authorImage\" accept=\"image\/*\" class=\"w-full text-sm text-gray-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-[#fce8ea] file:text-[#C11731] hover:file:bg-[#f9dadd] transition file-input\"><!-- [et_pb_line_break_holder] -->                <\/div><!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                <div><!-- [et_pb_line_break_holder] -->                    <label for=\"author\" class=\"block text-sm font-semibold text-gray-700 mb-2 flex items-center\"><!-- [et_pb_line_break_holder] -->                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 mr-1 text-[#C11731]\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><!-- [et_pb_line_break_holder] -->                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" \/><!-- [et_pb_line_break_holder] -->                        <\/svg><!-- [et_pb_line_break_holder] -->                        Nombre del autor<!-- [et_pb_line_break_holder] -->                    <\/label><!-- [et_pb_line_break_holder] -->                    <input type=\"text\" id=\"author\" class=\"w-full p-3.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C11731] focus:border-[#C11731] transition\" placeholder=\"Ej: Ana P\u00e9rez\" value=\"Gabriel Garc\u00eda M\u00e1rquez\"><!-- [et_pb_line_break_holder] -->                <\/div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                <div><!-- [et_pb_line_break_holder] -->                    <label for=\"editorial\" class=\"block text-sm font-semibold text-gray-700 mb-2 flex items-center\"><!-- [et_pb_line_break_holder] -->                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 mr-1 text-[#C11731]\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><!-- [et_pb_line_break_holder] -->                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\" \/><!-- [et_pb_line_break_holder] -->                        <\/svg><!-- [et_pb_line_break_holder] -->                        Nombre de la editorial<!-- [et_pb_line_break_holder] -->                    <\/label><!-- [et_pb_line_break_holder] -->                    <input type=\"text\" id=\"editorial\" class=\"w-full p-3.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C11731] focus:border-[#C11731] transition\" placeholder=\"Ej: Letras Vivas\" value=\"Editorial Sudamericana\"><!-- [et_pb_line_break_holder] -->                <\/div><!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                <div><!-- [et_pb_line_break_holder] -->                    <label for=\"backgroundSelector\" class=\"block text-sm font-semibold text-gray-700 mb-2 flex items-center\"><!-- [et_pb_line_break_holder] -->                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 mr-1 text-[#C11731]\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><!-- [et_pb_line_break_holder] -->                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" \/><!-- [et_pb_line_break_holder] -->                        <\/svg><!-- [et_pb_line_break_holder] -->                        Elige un fondo<!-- [et_pb_line_break_holder] -->                    <\/label><!-- [et_pb_line_break_holder] -->                    <select id=\"backgroundSelector\" class=\"w-full p-3.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C11731] focus:border-[#C11731] transition\"><!-- [et_pb_line_break_holder] -->                        <!-- Las opciones se generar\u00e1n con JS --><!-- [et_pb_line_break_holder] -->                    <\/select><!-- [et_pb_line_break_holder] -->                <\/div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                <div class=\"pt-2\"><!-- [et_pb_line_break_holder] -->                     <button id=\"downloadBtn\" class=\"w-full bg-[#C11731] text-white font-bold py-3.5 px-4 rounded-lg hover:bg-[#a5152a] focus:outline-none focus:ring-4 focus:ring-red-300 transition download-btn flex items-center justify-center\"><!-- [et_pb_line_break_holder] -->                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 mr-2\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><!-- [et_pb_line_break_holder] -->                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\" \/><!-- [et_pb_line_break_holder] -->                        <\/svg><!-- [et_pb_line_break_holder] -->                        Descargar Imagen (PNG)<!-- [et_pb_line_break_holder] -->                    <\/button><!-- [et_pb_line_break_holder] -->                <\/div><!-- [et_pb_line_break_holder] -->            <\/div><!-- [et_pb_line_break_holder] -->            <!-- [et_pb_line_break_holder] -->            <div class=\"mt-8 pt-6 border-t border-gray-200\"><!-- [et_pb_line_break_holder] -->                <div class=\"flex items-center text-gray-500 text-sm\"><!-- [et_pb_line_break_holder] -->                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 mr-1.5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><!-- [et_pb_line_break_holder] -->                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/><!-- [et_pb_line_break_holder] -->                    <\/svg><!-- [et_pb_line_break_holder] -->                    <pee>Las im\u00e1genes se generan en alta resoluci\u00f3n (1080&#215;1080)<\/pee><!-- [et_pb_line_break_holder] -->                <\/div><!-- [et_pb_line_break_holder] -->            <\/div><!-- [et_pb_line_break_holder] -->        <\/div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        <!-- Previsualizaci\u00f3n en Canvas --><!-- [et_pb_line_break_holder] -->        <div class=\"preview-container\"><!-- [et_pb_line_break_holder] -->            <div class=\"loading-overlay\" id=\"loadingOverlay\"><!-- [et_pb_line_break_holder] -->                <div class=\"spinner\"><\/div><!-- [et_pb_line_break_holder] -->            <\/div><!-- [et_pb_line_break_holder] -->            <!-- [et_pb_line_break_holder] -->            <div class=\"canvas-wrapper\"><!-- [et_pb_line_break_holder] -->                <canvas id=\"canvas\" width=\"1080\" height=\"1080\" class=\"w-full h-auto rounded-lg\"><\/canvas><!-- [et_pb_line_break_holder] -->            <\/div><!-- [et_pb_line_break_holder] -->        <\/div><!-- [et_pb_line_break_holder] -->    <\/div><!-- [et_pb_line_break_holder] -->    <!-- [et_pb_line_break_holder] -->    <div class=\"success-message\" id=\"successMessage\"><!-- [et_pb_line_break_holder] -->        <div class=\"flex items-center\"><!-- [et_pb_line_break_holder] -->            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 mr-2\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><!-- [et_pb_line_break_holder] -->                <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" \/><!-- [et_pb_line_break_holder] -->            <\/svg><!-- [et_pb_line_break_holder] -->            <span>\u00a1Imagen descargada con \u00e9xito!<\/span><!-- [et_pb_line_break_holder] -->        <\/div><!-- [et_pb_line_break_holder] -->    <\/div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <!-- SCRIPT ENCAPSULADO --><!-- [et_pb_line_break_holder] -->    <script><!-- [et_pb_line_break_holder] -->    (function() {<!-- [et_pb_line_break_holder] -->        \/\/ Funci\u00f3n principal con prefijo \u00fanico<!-- [et_pb_line_break_holder] -->        function plogGenerator_init() {<!-- [et_pb_line_break_holder] -->            const container = document.querySelector('.plog-generator-wrapper');<!-- [et_pb_line_break_holder] -->            if (!container) return;<!-- [et_pb_line_break_holder] -->            <!-- [et_pb_line_break_holder] -->            \/\/ Seleccionar elementos dentro del contenedor<!-- [et_pb_line_break_holder] -->            const canvas = container.querySelector('#canvas');<!-- [et_pb_line_break_holder] -->            if (!canvas) return;<!-- [et_pb_line_break_holder] -->            <!-- [et_pb_line_break_holder] -->            const ctx = canvas.getContext('2d');<!-- [et_pb_line_break_holder] -->            const authorInput = container.querySelector('#author');<!-- [et_pb_line_break_holder] -->            const editorialInput = container.querySelector('#editorial');<!-- [et_pb_line_break_holder] -->            const imageInput = container.querySelector('#authorImage');<!-- [et_pb_line_break_holder] -->            const backgroundSelector = container.querySelector('#backgroundSelector');<!-- [et_pb_line_break_holder] -->            const downloadBtn = container.querySelector('#downloadBtn');<!-- [et_pb_line_break_holder] -->            const loadingOverlay = container.querySelector('#loadingOverlay');<!-- [et_pb_line_break_holder] -->            const successMessage = container.querySelector('#successMessage');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ --- Datos y estado ---<!-- [et_pb_line_break_holder] -->            let authorImage = null;<!-- [et_pb_line_break_holder] -->            const fondos = {<!-- [et_pb_line_break_holder] -->                'Ondas Suaves': 'https:\/\/www.toptal.com\/designers\/subtlepatterns\/uploads\/fancy-cushion.png',<!-- [et_pb_line_break_holder] -->                'Puntos Grises': 'https:\/\/www.toptal.com\/designers\/subtlepatterns\/uploads\/light-grey-terrazzo.png',<!-- [et_pb_line_break_holder] -->                'Lino Blanco': 'https:\/\/www.toptal.com\/designers\/subtlepatterns\/uploads\/white_linen.png',<!-- [et_pb_line_break_holder] -->                'Nubes Claras': 'https:\/\/www.toptal.com\/designers\/subtlepatterns\/uploads\/clouds.png',<!-- [et_pb_line_break_holder] -->                'M\u00e1rmol Sutil': 'https:\/\/polisecuador.org\/wp-content\/uploads\/2025\/06\/Fondo-generador.jpg'<!-- [et_pb_line_break_holder] -->            };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ --- Carga de im\u00e1genes ---<!-- [et_pb_line_break_holder] -->            let logoImage = new Image();<!-- [et_pb_line_break_holder] -->            logoImage.crossOrigin = \"Anonymous\";<!-- [et_pb_line_break_holder] -->            \/\/ Usar el logo proporcionado<!-- [et_pb_line_break_holder] -->            logoImage.src = 'https:\/\/polisecuador.org\/wp-content\/uploads\/2025\/06\/Placeholder-Plog.png';<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            let backgroundImage = new Image();<!-- [et_pb_line_break_holder] -->            backgroundImage.crossOrigin = \"Anonymous\";<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ --- Inicializaci\u00f3n ---<!-- [et_pb_line_break_holder] -->            function inicializar() {<!-- [et_pb_line_break_holder] -->                \/\/ Poblar selector de fondos<!-- [et_pb_line_break_holder] -->                Object.keys(fondos).forEach(nombre => {<!-- [et_pb_line_break_holder] -->                    const option = document.createElement('option');<!-- [et_pb_line_break_holder] -->                    option.value = fondos[nombre];<!-- [et_pb_line_break_holder] -->                    option.textContent = nombre;<!-- [et_pb_line_break_holder] -->                    backgroundSelector.appendChild(option);<!-- [et_pb_line_break_holder] -->                });<!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                \/\/ Event Listeners<!-- [et_pb_line_break_holder] -->                authorInput.addEventListener('input', drawCanvas);<!-- [et_pb_line_break_holder] -->                editorialInput.addEventListener('input', drawCanvas);<!-- [et_pb_line_break_holder] -->                backgroundSelector.addEventListener('change', (e) => {<!-- [et_pb_line_break_holder] -->                    showLoading();<!-- [et_pb_line_break_holder] -->                    backgroundImage.src = e.target.value;<!-- [et_pb_line_break_holder] -->                });<!-- [et_pb_line_break_holder] -->                imageInput.addEventListener('change', handleImageUpload);<!-- [et_pb_line_break_holder] -->                downloadBtn.addEventListener('click', descargarImagen);<!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                \/\/ Manejadores para la imagen de fondo<!-- [et_pb_line_break_holder] -->                backgroundImage.onload = () => {<!-- [et_pb_line_break_holder] -->                    drawCanvas();<!-- [et_pb_line_break_holder] -->                    hideLoading();<!-- [et_pb_line_break_holder] -->                };<!-- [et_pb_line_break_holder] -->                backgroundImage.onerror = () => {<!-- [et_pb_line_break_holder] -->                    console.error(\"Error al cargar la imagen de fondo. Se usar\u00e1 el color de fallback.\");<!-- [et_pb_line_break_holder] -->                    drawCanvas();<!-- [et_pb_line_break_holder] -->                    hideLoading();<!-- [et_pb_line_break_holder] -->                };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                \/\/ Establecer el src inicial para el fondo<!-- [et_pb_line_break_holder] -->                backgroundImage.src = backgroundSelector.value;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                drawCanvas(); \/\/ Dibujo inicial<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ --- Funciones de UI ---<!-- [et_pb_line_break_holder] -->            function showLoading() {<!-- [et_pb_line_break_holder] -->                if (loadingOverlay) loadingOverlay.classList.add('active');<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            <!-- [et_pb_line_break_holder] -->            function hideLoading() {<!-- [et_pb_line_break_holder] -->                if (loadingOverlay) loadingOverlay.classList.remove('active');<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            <!-- [et_pb_line_break_holder] -->            function showSuccessMessage() {<!-- [et_pb_line_break_holder] -->                if (successMessage) {<!-- [et_pb_line_break_holder] -->                    successMessage.classList.add('show');<!-- [et_pb_line_break_holder] -->                    setTimeout(() => {<!-- [et_pb_line_break_holder] -->                        successMessage.classList.remove('show');<!-- [et_pb_line_break_holder] -->                    }, 3000);<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ --- Funciones de dibujo ---<!-- [et_pb_line_break_holder] -->            function drawCanvas() {<!-- [et_pb_line_break_holder] -->                if (!ctx) return;<!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                ctx.clearRect(0, 0, canvas.width, canvas.height);<!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                \/\/ 1. Dibujar fondo<!-- [et_pb_line_break_holder] -->                if (backgroundImage.complete && backgroundImage.naturalHeight !== 0) {<!-- [et_pb_line_break_holder] -->                    ctx.fillStyle = ctx.createPattern(backgroundImage, 'repeat');<!-- [et_pb_line_break_holder] -->                    ctx.fillRect(0, 0, canvas.width, canvas.height);<!-- [et_pb_line_break_holder] -->                } else {<!-- [et_pb_line_break_holder] -->                    ctx.fillStyle = '#f0f0f0'; \/\/ Fallback<!-- [et_pb_line_break_holder] -->                    ctx.fillRect(0, 0, canvas.width, canvas.height);<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                \/\/ 2. Dibujar imagen de autor<!-- [et_pb_line_break_holder] -->                if (authorImage) {<!-- [et_pb_line_break_holder] -->                    drawAuthorImage(authorImage);<!-- [et_pb_line_break_holder] -->                } else {<!-- [et_pb_line_break_holder] -->                    drawPlaceholderAuthorImage();<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                \/\/ 3. Dibujar textos<!-- [et_pb_line_break_holder] -->                drawText();<!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                \/\/ 4. Dibujar banner y logo<!-- [et_pb_line_break_holder] -->                drawBannerAndLogo();<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            function drawAuthorImage(img) {<!-- [et_pb_line_break_holder] -->                const size = 500;<!-- [et_pb_line_break_holder] -->                const x = canvas.width \/ 2 - size \/ 2;<!-- [et_pb_line_break_holder] -->                \/\/ Posici\u00f3n ajustada<!-- [et_pb_line_break_holder] -->                const y = 80;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                ctx.save();<!-- [et_pb_line_break_holder] -->                ctx.beginPath();<!-- [et_pb_line_break_holder] -->                ctx.arc(x + size \/ 2, y + size \/ 2, size \/ 2, 0, Math.PI * 2, true);<!-- [et_pb_line_break_holder] -->                ctx.strokeStyle = '#FFFFFF';<!-- [et_pb_line_break_holder] -->                ctx.lineWidth = 15;<!-- [et_pb_line_break_holder] -->                ctx.stroke();<!-- [et_pb_line_break_holder] -->                ctx.clip();<!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                const ar = img.width \/ img.height;<!-- [et_pb_line_break_holder] -->                let drawW, drawH, dX, dY;<!-- [et_pb_line_break_holder] -->                if (ar > 1) { \/\/ Imagen ancha<!-- [et_pb_line_break_holder] -->                    drawH = size;<!-- [et_pb_line_break_holder] -->                    drawW = size * ar;<!-- [et_pb_line_break_holder] -->                    dX = x - (drawW - size) \/ 2;<!-- [et_pb_line_break_holder] -->                    dY = y;<!-- [et_pb_line_break_holder] -->                } else { \/\/ Imagen alta o cuadrada<!-- [et_pb_line_break_holder] -->                    drawW = size;<!-- [et_pb_line_break_holder] -->                    drawH = size \/ ar;<!-- [et_pb_line_break_holder] -->                    dX = x;<!-- [et_pb_line_break_holder] -->                    dY = y - (drawH - size) \/ 2;<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->                ctx.drawImage(img, dX, dY, drawW, drawH);<!-- [et_pb_line_break_holder] -->                ctx.restore();<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            <!-- [et_pb_line_break_holder] -->            function drawPlaceholderAuthorImage() {<!-- [et_pb_line_break_holder] -->                const size = 500;<!-- [et_pb_line_break_holder] -->                const x = canvas.width \/ 2 - size \/ 2;<!-- [et_pb_line_break_holder] -->                \/\/ Posici\u00f3n ajustada<!-- [et_pb_line_break_holder] -->                const y = 80;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                ctx.save();<!-- [et_pb_line_break_holder] -->                ctx.beginPath();<!-- [et_pb_line_break_holder] -->                ctx.arc(x + size \/ 2, y + size \/ 2, size \/ 2, 0, Math.PI * 2, true);<!-- [et_pb_line_break_holder] -->                ctx.fillStyle = '#e0e0e0';<!-- [et_pb_line_break_holder] -->                ctx.fill();<!-- [et_pb_line_break_holder] -->                ctx.strokeStyle = '#FFFFFF';<!-- [et_pb_line_break_holder] -->                ctx.lineWidth = 15;<!-- [et_pb_line_break_holder] -->                ctx.stroke();<!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                ctx.font = \"40px 'Roboto'\";<!-- [et_pb_line_break_holder] -->                ctx.fillStyle = '#a0a0a0';<!-- [et_pb_line_break_holder] -->                ctx.textAlign = 'center';<!-- [et_pb_line_break_holder] -->                ctx.textBaseline = 'middle';<!-- [et_pb_line_break_holder] -->                ctx.fillText(\"Foto del Autor\", x + size \/ 2, y + size \/ 2);<!-- [et_pb_line_break_holder] -->                ctx.restore();<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            function wrapText(context, text, x, y, maxWidth, lineHeight) {<!-- [et_pb_line_break_holder] -->                const words = text.split(' ');<!-- [et_pb_line_break_holder] -->                let line = '';<!-- [et_pb_line_break_holder] -->                let currentY = y;<!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                for (let i = 0; i < words.length; i++) {<!-- [et_pb_line_break_holder] -->                    let testLine = line + words[i] + ' ';<!-- [et_pb_line_break_holder] -->                    let metrics = context.measureText(testLine);<!-- [et_pb_line_break_holder] -->                    let testWidth = metrics.width;<!-- [et_pb_line_break_holder] -->                    if (testWidth > maxWidth && i > 0) {<!-- [et_pb_line_break_holder] -->                        context.fillText(line.trim(), x, currentY);<!-- [et_pb_line_break_holder] -->                        line = words[i] + ' ';<!-- [et_pb_line_break_holder] -->                        currentY += lineHeight;<!-- [et_pb_line_break_holder] -->                    } else {<!-- [et_pb_line_break_holder] -->                        line = testLine;<!-- [et_pb_line_break_holder] -->                    }<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->                context.fillText(line.trim(), x, currentY);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            function drawText() {<!-- [et_pb_line_break_holder] -->                const authorText = authorInput.value || \"Nombre del Autor\";<!-- [et_pb_line_break_holder] -->                const editorialText = editorialInput.value || \"Editorial\";<!-- [et_pb_line_break_holder] -->                const centerX = canvas.width \/ 2;<!-- [et_pb_line_break_holder] -->                const editorialMaxWidth = canvas.width - 120;<!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                \/\/ Nombre del autor<!-- [et_pb_line_break_holder] -->                ctx.font = \"42px 'Roboto'\";<!-- [et_pb_line_break_holder] -->                ctx.fillStyle = '#444444';<!-- [et_pb_line_break_holder] -->                ctx.textAlign = 'center';<!-- [et_pb_line_break_holder] -->                \/\/ Posici\u00f3n ajustada<!-- [et_pb_line_break_holder] -->                ctx.fillText(authorText, centerX, 660);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                \/\/ Nombre de la editorial<!-- [et_pb_line_break_holder] -->                ctx.font = \"italic 700 75px 'Playfair Display'\";<!-- [et_pb_line_break_holder] -->                ctx.fillStyle = '#000000';<!-- [et_pb_line_break_holder] -->                ctx.textAlign = 'center';<!-- [et_pb_line_break_holder] -->                \/\/ Posici\u00f3n ajustada<!-- [et_pb_line_break_holder] -->                wrapText(ctx, editorialText, centerX, 750, editorialMaxWidth, 85);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            function drawBannerAndLogo() {<!-- [et_pb_line_break_holder] -->                \/\/ Banner inferior<!-- [et_pb_line_break_holder] -->                const bannerHeight = 120;<!-- [et_pb_line_break_holder] -->                ctx.fillStyle = '#C11731';<!-- [et_pb_line_break_holder] -->                ctx.fillRect(0, canvas.height - bannerHeight, canvas.width, bannerHeight);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                \/\/ Texto del banner - SOLO UNA FUENTE (Roboto)<!-- [et_pb_line_break_holder] -->                const text = \"L\u00e9ela ya en PLOG\";<!-- [et_pb_line_break_holder] -->                const centerX = canvas.width \/ 2;<!-- [et_pb_line_break_holder] -->                const yPos = canvas.height - bannerHeight \/ 2;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                \/\/ Configurar contexto<!-- [et_pb_line_break_holder] -->                ctx.font = \"bold 58px 'Roboto'\";<!-- [et_pb_line_break_holder] -->                ctx.fillStyle = '#FFFFFF';<!-- [et_pb_line_break_holder] -->                ctx.textAlign = 'center';<!-- [et_pb_line_break_holder] -->                ctx.textBaseline = 'middle';<!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                \/\/ Dibujar texto completo<!-- [et_pb_line_break_holder] -->                ctx.fillText(text, centerX, yPos);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->                \/\/ Logo en la esquina superior derecha<!-- [et_pb_line_break_holder] -->                if (logoImage.complete && logoImage.naturalHeight !== 0) {<!-- [et_pb_line_break_holder] -->                    const logoW = 200;<!-- [et_pb_line_break_holder] -->                    const logoH = (logoW \/ logoImage.width) * logoImage.height;<!-- [et_pb_line_break_holder] -->                    ctx.drawImage(logoImage, canvas.width - logoW - 40, 40, logoW, logoH);<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            \/\/ --- Manejadores de eventos ---<!-- [et_pb_line_break_holder] -->            function handleImageUpload(e) {<!-- [et_pb_line_break_holder] -->                const file = e.target.files[0];<!-- [et_pb_line_break_holder] -->                if (file) {<!-- [et_pb_line_break_holder] -->                    showLoading();<!-- [et_pb_line_break_holder] -->                    const reader = new FileReader();<!-- [et_pb_line_break_holder] -->                    reader.onload = (event) => {<!-- [et_pb_line_break_holder] -->                        authorImage = new Image();<!-- [et_pb_line_break_holder] -->                        authorImage.onload = () => {<!-- [et_pb_line_break_holder] -->                            drawCanvas();<!-- [et_pb_line_break_holder] -->                            hideLoading();<!-- [et_pb_line_break_holder] -->                        };<!-- [et_pb_line_break_holder] -->                        authorImage.src = event.target.result;<!-- [et_pb_line_break_holder] -->                    };<!-- [et_pb_line_break_holder] -->                    reader.readAsDataURL(file);<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            function descargarImagen() {<!-- [et_pb_line_break_holder] -->                showLoading();<!-- [et_pb_line_break_holder] -->                <!-- [et_pb_line_break_holder] -->                \/\/ Agregar un peque\u00f1o retraso para permitir que se muestre el spinner<!-- [et_pb_line_break_holder] -->                setTimeout(() => {<!-- [et_pb_line_break_holder] -->                    const dataURL = canvas.toDataURL('image\/png');<!-- [et_pb_line_break_holder] -->                    const link = document.createElement('a');<!-- [et_pb_line_break_holder] -->                    const fileName = (editorialInput.value || 'editorial').replace(\/\\s+\/g, '-').toLowerCase();<!-- [et_pb_line_break_holder] -->                    link.download = `plog-${fileName}.png`;<!-- [et_pb_line_break_holder] -->                    link.href = dataURL;<!-- [et_pb_line_break_holder] -->                    document.body.appendChild(link);<!-- [et_pb_line_break_holder] -->                    link.click();<!-- [et_pb_line_break_holder] -->                    document.body.removeChild(link);<!-- [et_pb_line_break_holder] -->                    <!-- [et_pb_line_break_holder] -->                    hideLoading();<!-- [et_pb_line_break_holder] -->                    showSuccessMessage();<!-- [et_pb_line_break_holder] -->                }, 300);<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            <!-- [et_pb_line_break_holder] -->            \/\/ Iniciar el script<!-- [et_pb_line_break_holder] -->            inicializar();<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        <!-- [et_pb_line_break_holder] -->        \/\/ Ejecutar cuando el DOM est\u00e9 listo<!-- [et_pb_line_break_holder] -->        if (document.readyState === 'loading') {<!-- [et_pb_line_break_holder] -->            document.addEventListener('DOMContentLoaded', plogGenerator_init);<!-- [et_pb_line_break_holder] -->        } else {<!-- [et_pb_line_break_holder] -->            plogGenerator_init();<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    })();<!-- [et_pb_line_break_holder] -->    <\/script><!-- [et_pb_line_break_holder] --><\/div>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n<span class=\"et_bloom_bottom_trigger\"><\/span>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":685,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-1136","page","type-page","status-publish","hentry"],"pp_statuses_selecting_workflow":false,"pp_workflow_action":"current","pp_status_selection":"publish","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Generaci\u00f3n de Imagenes - Polis Ecuador<\/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:\/\/polisecuador.org\/en\/plog\/generador-imagenes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generaci\u00f3n de Imagenes - Polis Ecuador\" \/>\n<meta property=\"og:url\" content=\"https:\/\/polisecuador.org\/en\/plog\/generador-imagenes\/\" \/>\n<meta property=\"og:site_name\" content=\"Polis Ecuador\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/polisecuador\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-10T14:39:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/polisecuador.org\/wp-content\/uploads\/2024\/05\/Sin-titulo-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@polisecuador\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/polisecuador.org\\\/plog\\\/generador-imagenes\\\/\",\"url\":\"https:\\\/\\\/polisecuador.org\\\/plog\\\/generador-imagenes\\\/\",\"name\":\"Generaci\u00f3n de Imagenes - Polis Ecuador\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/polisecuador.org\\\/#website\"},\"datePublished\":\"2025-06-23T07:32:51+00:00\",\"dateModified\":\"2025-07-10T14:39:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/polisecuador.org\\\/plog\\\/generador-imagenes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/polisecuador.org\\\/plog\\\/generador-imagenes\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/polisecuador.org\\\/plog\\\/generador-imagenes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/polisecuador.org\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Plog\",\"item\":\"https:\\\/\\\/polisecuador.org\\\/plog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Generaci\u00f3n de Imagenes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/polisecuador.org\\\/#website\",\"url\":\"https:\\\/\\\/polisecuador.org\\\/\",\"name\":\"Polis Ecuador\",\"description\":\"Academia de Formaci\u00f3n Pol\u00edtica\",\"publisher\":{\"@id\":\"https:\\\/\\\/polisecuador.org\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/polisecuador.org\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/polisecuador.org\\\/#organization\",\"name\":\"Polis Ecuador\",\"url\":\"https:\\\/\\\/polisecuador.org\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/polisecuador.org\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/polisecuador.org\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/polis-web.svg\",\"contentUrl\":\"https:\\\/\\\/polisecuador.org\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/polis-web.svg\",\"width\":1391.69,\"height\":754.13,\"caption\":\"Polis Ecuador\"},\"image\":{\"@id\":\"https:\\\/\\\/polisecuador.org\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/polisecuador\",\"https:\\\/\\\/x.com\\\/polisecuador\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Generaci\u00f3n de Imagenes - Polis Ecuador","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:\/\/polisecuador.org\/en\/plog\/generador-imagenes\/","og_locale":"en_US","og_type":"article","og_title":"Generaci\u00f3n de Imagenes - Polis Ecuador","og_url":"https:\/\/polisecuador.org\/en\/plog\/generador-imagenes\/","og_site_name":"Polis Ecuador","article_publisher":"https:\/\/www.facebook.com\/polisecuador","article_modified_time":"2025-07-10T14:39:09+00:00","og_image":[{"width":1500,"height":500,"url":"https:\/\/polisecuador.org\/wp-content\/uploads\/2024\/05\/Sin-titulo-2.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@polisecuador","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/polisecuador.org\/plog\/generador-imagenes\/","url":"https:\/\/polisecuador.org\/plog\/generador-imagenes\/","name":"Generaci\u00f3n de Imagenes - Polis Ecuador","isPartOf":{"@id":"https:\/\/polisecuador.org\/#website"},"datePublished":"2025-06-23T07:32:51+00:00","dateModified":"2025-07-10T14:39:09+00:00","breadcrumb":{"@id":"https:\/\/polisecuador.org\/plog\/generador-imagenes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/polisecuador.org\/plog\/generador-imagenes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/polisecuador.org\/plog\/generador-imagenes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/polisecuador.org\/"},{"@type":"ListItem","position":2,"name":"Plog","item":"https:\/\/polisecuador.org\/plog\/"},{"@type":"ListItem","position":3,"name":"Generaci\u00f3n de Imagenes"}]},{"@type":"WebSite","@id":"https:\/\/polisecuador.org\/#website","url":"https:\/\/polisecuador.org\/","name":"Polis Ecuador","description":"Academia de Formaci\u00f3n Pol\u00edtica","publisher":{"@id":"https:\/\/polisecuador.org\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/polisecuador.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/polisecuador.org\/#organization","name":"Polis Ecuador","url":"https:\/\/polisecuador.org\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/polisecuador.org\/#\/schema\/logo\/image\/","url":"https:\/\/polisecuador.org\/wp-content\/uploads\/2023\/04\/polis-web.svg","contentUrl":"https:\/\/polisecuador.org\/wp-content\/uploads\/2023\/04\/polis-web.svg","width":1391.69,"height":754.13,"caption":"Polis Ecuador"},"image":{"@id":"https:\/\/polisecuador.org\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/polisecuador","https:\/\/x.com\/polisecuador"]}]}},"_links":{"self":[{"href":"https:\/\/polisecuador.org\/en\/wp-json\/wp\/v2\/pages\/1136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/polisecuador.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/polisecuador.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/polisecuador.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/polisecuador.org\/en\/wp-json\/wp\/v2\/comments?post=1136"}],"version-history":[{"count":0,"href":"https:\/\/polisecuador.org\/en\/wp-json\/wp\/v2\/pages\/1136\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/polisecuador.org\/en\/wp-json\/wp\/v2\/pages\/685"}],"wp:attachment":[{"href":"https:\/\/polisecuador.org\/en\/wp-json\/wp\/v2\/media?parent=1136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}