{"id":9253,"date":"2025-11-30T03:21:24","date_gmt":"2025-11-30T03:21:24","guid":{"rendered":"https:\/\/tiendalibreshop.com\/?page_id=9253"},"modified":"2025-12-04T03:39:22","modified_gmt":"2025-12-04T03:39:22","slug":"formulario-dcto","status":"publish","type":"page","link":"https:\/\/tiendalibreshop.com\/en\/formulario-dcto\/","title":{"rendered":"Formulario Dcto"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Personaliza tu Experiencia - TLS<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@200;300;400;500;600;700;800&display=swap');\r\n body { font-family: 'Outfit', sans-serif; background-color: #020202; color: white; -webkit-font-smoothing: antialiased; }\r\n\r\n \/* FONDOS *\/\r\n .bg-gradient-tls { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #050505; z-index: -2; }\r\n .ambient-light { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.4; animation: breathe 8s infinite ease-in-out; }\r\n .light-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(234, 88, 12, 0.15) 0%, transparent 70%); top: -20%; left: -10%; }\r\n .light-2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 70%); bottom: -10%; right: -10%; }\r\n @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.1); opacity: 0.2; } }\r\n\r\n \/* Panel *\/\r\n .glass-panel { background: rgba(18, 18, 18, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9); }\r\n\r\n \/* INPUTS *\/\r\n .floating-input-group { position: relative; }\r\n .modern-input { width: 100%; background: rgba(255,255,255,0.1) !important; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; padding: 18px 18px 18px 48px !important; color: #ffffff !important; font-size: 16px; transition: all 0.3s ease; }\r\n .modern-input:focus { background: rgba(255,255,255,0.15) !important; border-color: #f97316; outline: none; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2); }\r\n .input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #d1d5db; font-size: 18px; pointer-events: none; z-index: 10; }\r\n .modern-input:focus ~ .input-icon { color: #f97316; }\r\n\r\n \/* TARJETAS *\/\r\n .selection-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }\r\n .option-input:checked + .selection-card { background: linear-gradient(180deg, rgba(249,115,22,0.15) 0%, rgba(249,115,22,0.05) 100%); border-color: #f97316; box-shadow: 0 0 20px rgba(249, 115, 22, 0.15); transform: translateY(-2px); }\r\n .option-input:checked + .selection-card i { color: #fdba74; transform: scale(1.1); }\r\n .option-input:checked + .selection-card span { color: white; }\r\n\r\n \/* TICKET *\/\r\n .golden-ticket { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); position: relative; overflow: hidden; border: 1px solid #fcd34d; }\r\n .golden-ticket::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255,255,255,0.8), transparent); transform: rotate(45deg); animation: shine-ticket 3s infinite; }\r\n @keyframes shine-ticket { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } }\r\n\r\n \/* TAGS *\/\r\n .genre-tag { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); transition: all 0.2s; }\r\n .genre-input:checked + .genre-tag { background: white; color: black; border-color: white; font-weight: 700; transform: scale(1.05); }\r\n\r\n \/* BOTONES *\/\r\n .btn-glow { background: linear-gradient(90deg, #ea580c, #f97316, #fbbf24); background-size: 200% auto; transition: all 0.5s; }\r\n .btn-glow:hover { background-position: right center; box-shadow: 0 0 30px rgba(249, 115, 22, 0.4); }\r\n \r\n \/* Bot\u00f3n WhatsApp Premium *\/\r\n .btn-whatsapp-premium {\r\n background: linear-gradient(45deg, #25D366, #128C7E);\r\n box-shadow: 0 10px 30px -10px rgba(37, 211, 102, 0.6);\r\n transition: all 0.3s ease;\r\n }\r\n .btn-whatsapp-premium:hover {\r\n transform: translateY(-3px) scale(1.02);\r\n box-shadow: 0 20px 40px -10px rgba(37, 211, 102, 0.8);\r\n }\r\n\r\n \/* Bot\u00f3n Shop Naranja *\/\r\n .btn-shop-orange {\r\n border: 2px solid rgba(249, 115, 22, 0.5);\r\n background: rgba(249, 115, 22, 0.05);\r\n transition: all 0.3s ease;\r\n }\r\n .btn-shop-orange:hover {\r\n border-color: rgba(249, 115, 22, 1);\r\n background: rgba(249, 115, 22, 0.15);\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 30px -10px rgba(249, 115, 22, 0.4);\r\n }\r\n\r\n .fade-up { animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; opacity: 0; transform: translateY(20px); }\r\n @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }\r\n \r\n .selectable-text { user-select: text !important; -webkit-user-select: text !important; cursor: text; }\r\n .input-error { border-color: #ef4444 !important; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2) !important; animation: shake 0.5s ease-in-out; }\r\n .error-message { color: #ef4444; font-size: 13px; font-weight: 600; margin-top: 8px; display: flex; align-items: center; gap: 6px; }\r\n @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }\r\n \r\n \/* Avatar Ring *\/\r\n .avatar-glow-ring { position: absolute; inset: -8px; border-radius: 50%; background: linear-gradient(45deg, #25D366, #00ff88, #128C7E); z-index: -1; filter: blur(12px); opacity: 0.8; animation: pulse-ring 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }\r\n @keyframes pulse-ring { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen flex items-center justify-center p-4 lg:p-6\">\r\n\r\n <div class=\"bg-gradient-tls\">\r\n <div class=\"ambient-light light-1\"><\/div>\r\n <div class=\"ambient-light light-2\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-panel w-full max-w-6xl rounded-[2rem] overflow-hidden fade-up flex flex-col lg:flex-row relative z-10\">\r\n <div class=\"w-full lg:w-5\/12 p-8 lg:p-12 bg-black\/40 border-b lg:border-b-0 lg:border-r border-white\/5 flex flex-col relative\">\r\n <div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-b from-orange-500\/5 to-transparent pointer-events-none\"><\/div>\r\n \r\n <div class=\"relative z-10\">\r\n <div class=\"flex items-center gap-2 mb-6 opacity-80\">\r\n <span class=\"w-2 h-2 rounded-full bg-orange-500 animate-pulse\"><\/span>\r\n <span class=\"text-xs font-bold tracking-[0.2em] text-orange-200 uppercase\">Tienda Libre Shop<\/span>\r\n <\/div>\r\n\r\n <h1 class=\"text-4xl lg:text-5xl font-extralight text-white mb-6 leading-tight\">\r\n Dise\u00f1a tu <br>\r\n <span class=\"font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-amber-200\">Entretenimiento.<\/span>\r\n <\/h1>\r\n \r\n <p class=\"text-gray-400 font-light leading-relaxed mb-8\">\r\n Personaliza tu cat\u00e1logo y recibe recomendaciones basadas en tus gustos reales.\r\n <\/p>\r\n\r\n <div class=\"bg-blue-900\/20 border border-blue-500\/20 p-4 rounded-xl flex items-start gap-3 mb-8\">\r\n <i class=\"fas fa-info-circle text-blue-400 mt-1\"><\/i>\r\n <p class=\"text-xs text-blue-100\/80 leading-relaxed\">\r\n Si completas este paso ahora, <strong>ya no tendr\u00e1s que repetirlo<\/strong> en la p\u00e1gina principal. Tus preferencias quedar\u00e1n guardadas.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mt-auto relative z-10\">\r\n <div class=\"golden-ticket rounded-xl p-6 shadow-2xl\">\r\n <div class=\"flex items-center justify-between border-b border-orange-900\/10 pb-3 mb-3 border-dashed\">\r\n <span class=\"text-[10px] font-black text-orange-900 uppercase tracking-widest\">Cup\u00f3n de Bienvenida<\/span>\r\n <i class=\"fas fa-ticket-alt text-orange-600\"><\/i>\r\n <\/div>\r\n <div class=\"flex items-baseline gap-2 text-orange-900\">\r\n <span class=\"text-6xl font-black tracking-tighter\">56%<\/span>\r\n <span class=\"text-2xl font-bold\">DCTO<\/span>\r\n <\/div>\r\n \r\n <div class=\"mt-4 bg-white\/60 border border-orange-900\/10 rounded px-3 py-2\">\r\n <ul class=\"text-[10px] font-bold text-orange-900 uppercase space-y-1 list-none\">\r\n <li class=\"flex items-center gap-1.5\">\r\n <i class=\"fas fa-check-circle text-orange-600\"><\/i> V\u00e1lido en compras > $15 USD\r\n <\/li>\r\n <li class=\"flex items-center gap-1.5 text-red-700\">\r\n <i class=\"fas fa-ban\"><\/i> No v\u00e1lido en Membres\u00edas\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"w-full lg:w-7\/12 p-8 lg:p-12 bg-gradient-to-b from-white\/[0.01] to-transparent\">\r\n <form id=\"preferencesForm\" class=\"space-y-8\" novalidate action=\"\">\r\n \r\n <div class=\"space-y-3\" id=\"section-email\">\r\n <label class=\"text-xs font-bold text-gray-400 uppercase tracking-widest ml-1\">Paso 1: Tu Correo (Requerido)<\/label>\r\n <div class=\"floating-input-group\">\r\n <input type=\"email\" name=\"Email\" id=\"emailInput\" required placeholder=\"correo@correo.com\" class=\"modern-input\">\r\n <i class=\"far fa-envelope input-icon\"><\/i>\r\n <\/div>\r\n <span class=\"error-message hidden\" id=\"error-email\"><i class=\"fas fa-exclamation-circle\"><\/i> Debes escribir un correo v\u00e1lido.<\/span>\r\n <\/div>\r\n\r\n <div class=\"space-y-3\" id=\"section-type\">\r\n <label class=\"text-xs font-bold text-gray-400 uppercase tracking-widest ml-1\">\u00bfQu\u00e9 contenido prefieres? <span class=\"text-red-500\">*<\/span><\/label>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-4\" id=\"container-type\">\r\n <label class=\"cursor-pointer group h-28\">\r\n <input type=\"checkbox\" name=\"type\" value=\"Series\" class=\"option-input hidden\">\r\n <div class=\"selection-card rounded-xl p-2 group-hover:bg-white\/5\">\r\n <i class=\"fas fa-tv text-2xl text-gray-500 mb-2 transition-colors\"><\/i>\r\n <span class=\"text-sm font-semibold text-gray-300\">Series<\/span>\r\n <\/div>\r\n <\/label>\r\n <label class=\"cursor-pointer group h-28\">\r\n <input type=\"checkbox\" name=\"type\" value=\"Peliculas\" class=\"option-input hidden\">\r\n <div class=\"selection-card rounded-xl p-2 group-hover:bg-white\/5\">\r\n <i class=\"fas fa-film text-2xl text-gray-500 mb-2 transition-colors\"><\/i>\r\n <span class=\"text-sm font-semibold text-gray-300\">Pel\u00edculas<\/span>\r\n <\/div>\r\n <\/label>\r\n <label class=\"cursor-pointer group h-28\">\r\n <input type=\"checkbox\" name=\"type\" value=\"Novelas\" class=\"option-input hidden\">\r\n <div class=\"selection-card rounded-xl p-2 group-hover:bg-white\/5\">\r\n <i class=\"fas fa-heart text-2xl text-gray-500 mb-2 transition-colors\"><\/i>\r\n <span class=\"text-sm font-semibold text-gray-300\">Novelas<\/span>\r\n <\/div>\r\n <\/label>\r\n <\/div>\r\n <span class=\"error-message hidden\" id=\"error-type\"><i class=\"fas fa-exclamation-circle\"><\/i> Selecciona al menos una opci\u00f3n.<\/span>\r\n <\/div>\r\n\r\n <div class=\"space-y-3\" id=\"section-genre\">\r\n <label class=\"text-xs font-bold text-gray-400 uppercase tracking-widest ml-1\">G\u00e9neros Favoritos <span class=\"text-red-500\">*<\/span><\/label>\r\n <div class=\"flex flex-wrap gap-2\" id=\"container-genre\">\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Acci\u00f3n\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Action<\/span><\/label>\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Animados\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Animated<\/span><\/label>\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Aventura\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Adventure<\/span><\/label>\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Ciencia Ficci\u00f3n\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Science fiction<\/span><\/label>\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Comedia\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Comedy<\/span><\/label>\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Crimen\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Crime<\/span><\/label>\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Drama\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Drama<\/span><\/label>\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Familiar\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Familiar<\/span><\/label>\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Fantas\u00eda\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Fancy<\/span><\/label>\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Misterio\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Mystery<\/span><\/label>\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Musical\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Musical<\/span><\/label>\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Romance\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Romance<\/span><\/label>\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Terror\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Terror<\/span><\/label>\r\n <label><input type=\"checkbox\" name=\"genre\" value=\"Western\" class=\"genre-input hidden\"><span class=\"genre-tag px-4 py-2 rounded-lg text-xs cursor-pointer text-gray-400 select-none block\">Western<\/span><\/label>\r\n <\/div>\r\n <span class=\"error-message hidden\" id=\"error-genre\"><i class=\"fas fa-exclamation-circle\"><\/i> Elige al menos un g\u00e9nero.<\/span>\r\n <\/div>\r\n\r\n <div class=\"space-y-3\" id=\"section-quality\">\r\n <label class=\"text-xs font-bold text-gray-400 uppercase tracking-widest ml-1\">Calidad de Video <span class=\"text-red-500\">*<\/span><\/label>\r\n <div class=\"flex bg-white\/5 p-1 rounded-xl border border-white\/10\" id=\"container-quality\">\r\n <label class=\"flex-1 cursor-pointer\">\r\n <input type=\"radio\" name=\"Calidad\" value=\"HD\" class=\"peer hidden\">\r\n <div class=\"text-center py-3 rounded-lg text-xs font-bold text-gray-500 peer-checked:bg-white\/10 peer-checked:text-white transition-all\">HD<\/div>\r\n <\/label>\r\n <label class=\"flex-1 cursor-pointer\">\r\n <input type=\"radio\" name=\"Calidad\" value=\"FHD\" class=\"peer hidden\" checked>\r\n <div class=\"text-center py-3 rounded-lg text-xs font-bold text-gray-500 peer-checked:bg-white\/10 peer-checked:text-white transition-all\">FHD<\/div>\r\n <\/label>\r\n <label class=\"flex-1 cursor-pointer\">\r\n <input type=\"radio\" name=\"Calidad\" value=\"4K\" class=\"peer hidden\">\r\n <div class=\"text-center py-3 rounded-lg text-xs font-bold text-gray-500 peer-checked:bg-white\/10 peer-checked:text-white transition-all\">4K<\/div>\r\n <\/label>\r\n <\/div>\r\n <span class=\"error-message hidden\" id=\"error-quality\"><i class=\"fas fa-exclamation-circle\"><\/i> Selecciona una calidad.<\/span>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"w-full btn-glow rounded-xl py-5 text-white font-bold tracking-widest text-sm uppercase shadow-2xl transform transition-transform active:scale-[0.98] flex items-center justify-center gap-3\">\r\n <span>Guardar y Canjear Cup\u00f3n<\/span>\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/button>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"notification\" class=\"fixed inset-0 flex items-center justify-center bg-black\/95 backdrop-blur-xl z-50 hidden opacity-0 transition-opacity duration-500 p-4\">\r\n <div class=\"bg-[#111] border border-orange-500\/50 p-8 rounded-[2rem] text-center w-full max-w-lg relative shadow-2xl scale-90 transition-transform duration-300\" id=\"notif-card\">\r\n \r\n <div class=\"w-20 h-20 bg-gradient-to-tr from-green-500 to-emerald-400 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-green-500\/30\">\r\n <i class=\"fas fa-check text-4xl text-white\"><\/i>\r\n <\/div>\r\n \r\n <h3 class=\"text-3xl font-bold text-white mb-2\">\u00a1Cup\u00f3n Desbloqueado!<\/h3>\r\n <p class=\"text-gray-400 text-sm mb-6\">Copia el c\u00f3digo para continuar.<\/p>\r\n \r\n <div class=\"bg-gradient-to-r from-orange-900\/20 to-amber-900\/20 border-2 border-dashed border-orange-500\/50 rounded-2xl p-6 mb-8 relative overflow-hidden group\">\r\n <p class=\"text-[10px] text-orange-400 uppercase tracking-[0.3em] font-bold mb-2\">TU C\u00d3DIGO \u00daNICO<\/p>\r\n \r\n <div class=\"flex items-center justify-center gap-3\">\r\n <p id=\"couponCode\" class=\"selectable-text text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-yellow-200 tracking-wider\">\r\n TLSOFF56\r\n <\/p>\r\n <button id=\"copyBtn\" onclick=\"copyToClipboard()\" class=\"bg-white\/10 hover:bg-white\/20 text-white p-3 rounded-xl transition-colors border border-white\/10 shadow-lg\" title=\"Copiar c\u00f3digo\">\r\n <i class=\"far fa-copy text-lg\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"bg-red-600\/20 border-2 border-red-500 p-5 rounded-xl mb-6 text-left relative overflow-hidden\">\r\n <div class=\"flex flex-col gap-3 relative z-10\">\r\n <div class=\"flex items-center gap-3\">\r\n <i class=\"fas fa-exclamation-triangle text-red-500 text-2xl animate-pulse\"><\/i>\r\n <strong class=\"text-red-400 text-lg uppercase tracking-wider font-black\">CONDICIONES:<\/strong>\r\n <\/div>\r\n \r\n <ul class=\"text-white text-sm font-medium space-y-2 pl-2\">\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"text-red-400 mt-1\">\u25cf<\/span>\r\n <span>Guarda el c\u00f3digo ahora. <strong>Esta ventana no volver\u00e1 a aparecer.<\/strong><\/span>\r\n <\/li>\r\n <li class=\"flex items-start gap-2\">\r\n <span class=\"text-red-400 mt-1\">\u25cf<\/span>\r\n <span>V\u00e1lido solo en compras > <span class=\"text-orange-300 font-bold\">$15 USD<\/span>.<\/span>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <button onclick=\"closeNotification()\" class=\"w-full bg-white\/10 hover:bg-white\/15 text-white font-bold py-4 rounded-xl text-sm transition-colors border border-white\/5 uppercase tracking-wide\">\r\n Entendido, Cerrar Ventana\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"whatsapp-modal\" class=\"fixed inset-0 flex items-center justify-center bg-black\/95 backdrop-blur-3xl z-[60] hidden opacity-0 transition-opacity duration-500 p-4\">\r\n \r\n <div class=\"relative bg-[#090909] border border-white\/10 p-10 pt-16 rounded-[3.5rem] text-center w-full max-w-lg shadow-[0_0_80px_rgba(37,211,102,0.2)] scale-90 transition-transform duration-500 overflow-hidden\" id=\"whatsapp-card\">\r\n \r\n <div class=\"absolute top-0 inset-x-0 h-48 bg-gradient-to-b from-green-500\/20 via-emerald-500\/5 to-transparent pointer-events-none\"><\/div>\r\n\r\n <div class=\"relative w-48 h-48 mx-auto mb-10 group\">\r\n <div class=\"avatar-glow-ring\"><\/div>\r\n \r\n <div class=\"w-full h-full rounded-full overflow-hidden border-4 border-[#090909] relative z-10 shadow-2xl group-hover:scale-105 transition-transform duration-500\">\r\n <img decoding=\"async\" src=\"https:\/\/tiendalibreshop.com\/wp-content\/uploads\/2025\/12\/fullstream.png\" alt=\"Canal FullStream\" class=\"w-full h-full object-cover transform scale-110\">\r\n <\/div>\r\n\r\n <div class=\"absolute bottom-3 right-3 bg-white text-[#25D366] rounded-full z-20 shadow-[0_4px_12px_rgba(37,211,102,0.4)] flex items-center justify-center w-12 h-12 border-4 border-[#090909]\">\r\n <i class=\"fas fa-check text-2xl font-black\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"text-4xl lg:text-5xl font-black text-white mb-2 tracking-tight\">FullStream<\/h3>\r\n <p class=\"text-gray-400 text-sm uppercase tracking-[0.3em] font-bold mb-10\">Todo en su lugar<\/p>\r\n\r\n <div class=\"bg-gradient-to-r from-green-500\/20 to-emerald-500\/10 border border-green-500\/30 rounded-3xl p-6 mb-6 relative overflow-hidden backdrop-blur-md\">\r\n <div class=\"flex flex-col gap-1 items-center justify-center\">\r\n <div class=\"flex items-center gap-2 mb-1\">\r\n <i class=\"fas fa-check-circle text-green-400 text-xl\"><\/i>\r\n <p class=\"text-green-400 font-black text-lg uppercase tracking-wider\">\u00a1C\u00f3digo Copiado!<\/p>\r\n <\/div>\r\n <p class=\"text-gray-300 text-sm leading-tight\">\u00danete al canal para novedades.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-8 p-4 bg-white\/5 border border-white\/5 rounded-2xl flex flex-col items-center justify-center gap-2\">\r\n <p class=\"text-[10px] text-gray-500 uppercase tracking-widest font-bold\">Por si lo olvidaste, tu cup\u00f3n es:<\/p>\r\n <div class=\"flex items-center gap-3 bg-black\/40 px-4 py-2 rounded-xl border border-white\/5 cursor-pointer hover:bg-black\/60 transition-colors\" onclick=\"copyToClipboard2()\" id=\"backupCouponContainer\">\r\n <span id=\"backupCode\" class=\"text-2xl font-mono font-bold text-orange-200 tracking-wider\">TLSOFF56<\/span>\r\n <i class=\"far fa-copy text-orange-500\/50\" id=\"backupIcon\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"#LINK_DE_TU_CANAL\" target=\"_blank\" class=\"btn-whatsapp-premium w-full flex items-center justify-center gap-4 py-6 rounded-3xl text-white font-black uppercase tracking-widest text-lg mb-6 group relative overflow-hidden\">\r\n <span class=\"absolute inset-0 bg-gradient-to-r from-transparent via-white\/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700\"><\/span>\r\n <i class=\"fab fa-whatsapp text-3xl\"><\/i>\r\n <span>Unirse al Canal VIP<\/span>\r\n <\/a>\r\n\r\n <div onclick=\"goToShop()\" class=\"cursor-pointer group py-4 px-8 rounded-2xl border-2 border-orange-500\/30 hover:border-orange-400 bg-orange-500\/5 hover:bg-orange-500\/10 transition-all duration-300 btn-shop-orange\">\r\n <p class=\"text-orange-400 font-black tracking-widest uppercase text-base flex items-center justify-center gap-3 group-hover:text-orange-300 transition-colors\">\r\n Aprovecha el cup\u00f3n <i class=\"fas fa-arrow-right group-hover:translate-x-1 transition-transform bg-orange-500\/20 rounded-full p-2 w-8 h-8 flex items-center justify-center text-sm\"><\/i>\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const scriptURL = 'https:\/\/script.google.com\/macros\/s\/AKfycbzIa_Ay2XcNKrGYB4dYi_Ynd8p1xMSXwerp3ExjBInE-ns-O2yAXYYuzs-gRBQNMDY5kw\/exec';\r\n const form = document.getElementById('preferencesForm');\r\n \r\n \/\/ -------------------------------------------------------------\r\n \/\/ CONFIGURACI\u00d3N ACTUALIZADA\r\n \/\/ -------------------------------------------------------------\r\n const SHOP_URL = \"https:\/\/tiendalibreshop.com\/shop\/\";\r\n const WHATSAPP_URL = \"https:\/\/whatsapp.com\/channel\/0029Vaw0xOU0gcfJCtaghN2L\"; \r\n \r\n document.querySelector('.btn-whatsapp-premium').href = WHATSAPP_URL;\r\n\r\n\r\n \/\/ HELPERS VISUALES\r\n function showError(elementId, errorId) {\r\n const container = document.getElementById(elementId);\r\n const errorMsg = document.getElementById(errorId);\r\n if(container) container.classList.add('input-error');\r\n if(errorMsg) errorMsg.classList.remove('hidden');\r\n }\r\n\r\n function hideError(elementId, errorId) {\r\n const container = document.getElementById(elementId);\r\n const errorMsg = document.getElementById(errorId);\r\n if(container) container.classList.remove('input-error');\r\n if(errorMsg) errorMsg.classList.add('hidden');\r\n }\r\n\r\n document.getElementById('emailInput').addEventListener('input', () => hideError('emailInput', 'error-email'));\r\n form.querySelectorAll('input[name=\"type\"]').forEach(input => input.addEventListener('change', () => hideError('container-type', 'error-type')));\r\n form.querySelectorAll('input[name=\"genre\"]').forEach(input => input.addEventListener('change', () => hideError('container-genre', 'error-genre')));\r\n form.querySelectorAll('input[name=\"Calidad\"]').forEach(input => input.addEventListener('change', () => hideError('container-quality', 'error-quality')));\r\n\r\n \/\/ SUBMIT DEL FORM\r\n form.addEventListener('submit', e => {\r\n e.preventDefault();\r\n let isValid = true;\r\n\r\n const emailInput = document.getElementById('emailInput');\r\n if (!emailInput.value || !emailInput.value.includes('@')) { showError('emailInput', 'error-email'); isValid = false; }\r\n\r\n const types = form.querySelectorAll('input[name=\"type\"]:checked');\r\n if (types.length === 0) { showError('container-type', 'error-type'); isValid = false; }\r\n\r\n const genres = form.querySelectorAll('input[name=\"genre\"]:checked');\r\n if (genres.length === 0) { showError('container-genre', 'error-genre'); isValid = false; }\r\n\r\n const quality = form.querySelector('input[name=\"Calidad\"]:checked');\r\n if (!quality) { showError('container-quality', 'error-quality'); isValid = false; }\r\n\r\n if (!isValid) return; \r\n\r\n const btn = form.querySelector('button[type=\"submit\"]');\r\n const originalContent = btn.innerHTML;\r\n btn.innerHTML = '<i class=\"fas fa-circle-notch fa-spin\"><\/i> Guardando...';\r\n btn.style.opacity = '0.7';\r\n\r\n const formData = new FormData(form);\r\n const data = new FormData();\r\n data.append('Email', formData.get('Email'));\r\n data.append('Calidad', formData.get('Calidad'));\r\n\r\n const typeArr = []; types.forEach(el => typeArr.push(el.value)); data.append('Tipo', typeArr.join(', '));\r\n const genreArr = []; genres.forEach(el => genreArr.push(el.value)); data.append('Generos', genreArr.join(', '));\r\n\r\n fetch(scriptURL, { method: 'POST', body: data })\r\n .then(response => {\r\n const notif = document.getElementById('notification');\r\n const card = document.getElementById('notif-card');\r\n notif.classList.remove('hidden');\r\n void notif.offsetWidth; \r\n notif.classList.remove('opacity-0');\r\n card.classList.remove('scale-90');\r\n card.classList.add('scale-100');\r\n btn.innerHTML = originalContent;\r\n btn.style.opacity = '1';\r\n form.reset();\r\n })\r\n .catch(error => {\r\n alert('Error de conexi\u00f3n.');\r\n btn.innerHTML = originalContent;\r\n btn.style.opacity = '1';\r\n });\r\n });\r\n\r\n function closeNotification() {\r\n const notif = document.getElementById('notification');\r\n notif.classList.add('opacity-0');\r\n setTimeout(() => { notif.classList.add('hidden'); }, 500);\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ L\u00d3GICA DE TRANSICI\u00d3N DE POPUPS\r\n \/\/ ============================================\r\n\r\n function goToShop() {\r\n window.location.href = SHOP_URL;\r\n }\r\n\r\n function triggerPopupSwap() {\r\n setTimeout(() => {\r\n const couponModal = document.getElementById('notification');\r\n couponModal.classList.add('opacity-0');\r\n \r\n setTimeout(() => {\r\n couponModal.classList.add('hidden');\r\n \r\n const waModal = document.getElementById('whatsapp-modal');\r\n const waCard = document.getElementById('whatsapp-card');\r\n \r\n waModal.classList.remove('hidden');\r\n void waModal.offsetWidth; \r\n waModal.classList.remove('opacity-0');\r\n \r\n waCard.classList.remove('scale-90');\r\n waCard.classList.add('scale-100');\r\n \r\n }, 500); \r\n }, 1000);\r\n }\r\n\r\n \/\/ Copiado manual (Ctrl + C) - PRIMER POPUP\r\n document.addEventListener('copy', function(e) {\r\n const selectedText = window.getSelection().toString();\r\n \/\/ Solo actuar si el primer popup est\u00e1 visible\r\n const notif = document.getElementById('notification');\r\n if (notif && !notif.classList.contains('hidden')) {\r\n const couponCode = document.getElementById('couponCode').innerText.trim();\r\n if (selectedText.includes(couponCode)) {\r\n const btn = document.getElementById('copyBtn');\r\n const originalIcon = btn.innerHTML;\r\n btn.innerHTML = '<i class=\"fas fa-check text-green-400\"><\/i>';\r\n triggerPopupSwap(); \r\n setTimeout(() => { btn.innerHTML = originalIcon; }, 2000);\r\n }\r\n }\r\n });\r\n\r\n \/\/ Bot\u00f3n de Copiar - PRIMER POPUP\r\n function copyToClipboard() {\r\n const codeText = document.getElementById('couponCode').innerText.trim();\r\n const btn = document.getElementById('copyBtn');\r\n const originalIcon = btn.innerHTML;\r\n\r\n if (navigator.clipboard && navigator.clipboard.writeText) {\r\n navigator.clipboard.writeText(codeText)\r\n .then(() => {\r\n showCopiedFeedback(btn, originalIcon);\r\n triggerPopupSwap(); \r\n })\r\n .catch(() => fallbackCopy(codeText, btn, originalIcon));\r\n } else {\r\n fallbackCopy(codeText, btn, originalIcon);\r\n }\r\n }\r\n \r\n \/\/ Bot\u00f3n de Copiar - SEGUNDO POPUP (Backup)\r\n function copyToClipboard2() {\r\n const codeText = document.getElementById('backupCode').innerText.trim();\r\n const icon = document.getElementById('backupIcon');\r\n \r\n if (navigator.clipboard && navigator.clipboard.writeText) {\r\n navigator.clipboard.writeText(codeText).then(() => {\r\n icon.className = 'fas fa-check text-green-400';\r\n setTimeout(() => icon.className = 'far fa-copy text-orange-500\/50', 2000);\r\n });\r\n } else {\r\n \/\/ Fallback simple\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = codeText;\r\n document.body.appendChild(textArea);\r\n textArea.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(textArea);\r\n icon.className = 'fas fa-check text-green-400';\r\n setTimeout(() => icon.className = 'far fa-copy text-orange-500\/50', 2000);\r\n }\r\n }\r\n\r\n function fallbackCopy(text, btn, originalIcon) {\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = text;\r\n textArea.style.position = \"fixed\"; \r\n document.body.appendChild(textArea);\r\n textArea.focus();\r\n textArea.select();\r\n try {\r\n document.execCommand('copy');\r\n showCopiedFeedback(btn, originalIcon);\r\n triggerPopupSwap(); \r\n } catch (err) {\r\n console.error('No se pudo copiar', err);\r\n }\r\n document.body.removeChild(textArea);\r\n }\r\n\r\n function showCopiedFeedback(btn, originalIcon) {\r\n btn.innerHTML = '<i class=\"fas fa-check text-green-400\"><\/i>';\r\n setTimeout(() => {\r\n btn.innerHTML = originalIcon;\r\n }, 2000);\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Personaliza tu Experiencia – TLS Tienda Libre Shop Dise\u00f1a tu Entretenimiento. Personaliza tu cat\u00e1logo y recibe recomendaciones basadas en tus gustos reales. Si completas este paso ahora, ya no tendr\u00e1s que repetirlo en la p\u00e1gina principal. Tus preferencias quedar\u00e1n guardadas. Cup\u00f3n de Bienvenida 56% DCTO V\u00e1lido en compras > $15 USD No v\u00e1lido en Membres\u00edas […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9253","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tiendalibreshop.com\/en\/wp-json\/wp\/v2\/pages\/9253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tiendalibreshop.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tiendalibreshop.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tiendalibreshop.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tiendalibreshop.com\/en\/wp-json\/wp\/v2\/comments?post=9253"}],"version-history":[{"count":50,"href":"https:\/\/tiendalibreshop.com\/en\/wp-json\/wp\/v2\/pages\/9253\/revisions"}],"predecessor-version":[{"id":9378,"href":"https:\/\/tiendalibreshop.com\/en\/wp-json\/wp\/v2\/pages\/9253\/revisions\/9378"}],"wp:attachment":[{"href":"https:\/\/tiendalibreshop.com\/en\/wp-json\/wp\/v2\/media?parent=9253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}