{"id":154,"date":"2026-06-10T11:49:47","date_gmt":"2026-06-10T11:49:47","guid":{"rendered":"https:\/\/muestras.venetiansblinds.com\/?page_id=154"},"modified":"2026-06-10T15:10:50","modified_gmt":"2026-06-10T15:10:50","slug":"quizz","status":"publish","type":"page","link":"https:\/\/muestras.venetiansblinds.com\/index.php\/quizz\/","title":{"rendered":"Quizz"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Encuentra tu persiana ideal \u00b7 VenetiansBlinds<\/title>\n <meta name=\"description\" content=\"Descubre qu\u00e9 persiana o estor es perfecto para ti. Responde 4 preguntas y recibe tu recomendaci\u00f3n personalizada.\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Open+Sans:wght@400&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\n\n <style>\n \/* ============================================================\n RESET & TOKENS\n ============================================================ *\/\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --bg: #F7F5EF;\n --surface: #FFFFFF;\n --border: #E5E3DF;\n --border-active: #1C1C1C;\n --text-1: #1C1C1C;\n --text-2: #717171;\n --text-3: #9B9B98;\n --accent-bg: #F0EDE8;\n --card-active: #F5F3F0;\n --green-bg: #EBF5EB;\n --green-text: #2A6B2A;\n --whatsapp: #25D366;\n --brand: #8B3520;\n --radius-s: 8px;\n --radius-m: 12px;\n --radius-l: 16px;\n --radius-full: 999px;\n --shadow-s: 0 1px 4px rgba(0,0,0,.06);\n --shadow-m: 0 4px 20px rgba(0,0,0,.10);\n --transition: 0.15s ease;\n --max-w: 660px;\n --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n }\n\n html { scroll-behavior: smooth; }\n\n body {\n font-family: var(--font);\n background: var(--bg);\n color: var(--text-1);\n min-height: 100vh;\n -webkit-font-smoothing: antialiased;\n }\n\n \/* ============================================================\n HEADER & PROGRESS\n ============================================================ *\/\n .quiz-header {\n position: sticky;\n top: 0;\n z-index: 200;\n background: var(--surface);\n border-bottom: 1px solid var(--border);\n }\n\n .quiz-header-inner {\n max-width: var(--max-w);\n margin: 0 auto;\n padding: 8px 20px !important;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 34px !important;\n }\n\n .logo {\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n text-decoration: none !important;\n line-height: 0 !important;\n max-width: 130px !important;\n }\n\n \/* Logo blindado contra estilos globales de Elementor\/WordPress *\/\n .quiz-header .quiz-header-inner .logo > img.logo-img,\n body .quiz-header .quiz-header-inner a.logo img.logo-img,\n img.logo-img {\n height: 26px !important;\n max-height: 26px !important;\n width: auto !important;\n max-width: 130px !important;\n min-height: 0 !important;\n display: block !important;\n object-fit: contain !important;\n aspect-ratio: auto !important;\n }\n\n @media (max-width: 480px) {\n .quiz-header-inner {\n padding: 8px 16px !important;\n min-height: 34px !important;\n }\n\n .quiz-header .quiz-header-inner .logo > img.logo-img,\n body .quiz-header .quiz-header-inner a.logo img.logo-img,\n img.logo-img {\n height: 24px !important;\n max-height: 24px !important;\n max-width: 115px !important;\n }\n }\n\n \/* \u2500\u2500 STEP PROGRESS TRACK \u2500\u2500 *\/\n .step-track {\n display: flex;\n align-items: center;\n padding: 10px 20px 11px;\n background: var(--surface);\n border-bottom: 1px solid var(--border);\n \/* hidden on intro + results *\/\n }\n\n .step-track-inner {\n display: flex;\n align-items: center;\n width: 100%;\n max-width: var(--max-w);\n margin: 0 auto;\n }\n\n .sp-node {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n border: 1.5px solid #D8D6D2;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n color: var(--text-3);\n flex-shrink: 0;\n transition: background .25s ease, border-color .25s ease, color .25s ease;\n position: relative;\n z-index: 1;\n }\n\n .sp-node.active {\n background: var(--brand);\n border-color: var(--brand);\n color: #fff;\n }\n\n .sp-node.done {\n background: var(--brand);\n border-color: var(--brand);\n color: #fff;\n }\n\n \/* checkmark inside completed nodes *\/\n .sp-node.done span { display: none; }\n .sp-node.done::after {\n content: '';\n display: block;\n width: 10px;\n height: 6px;\n border-left: 2px solid #fff;\n border-bottom: 2px solid #fff;\n transform: rotate(-45deg) translate(1px, -1px);\n }\n\n .sp-line {\n flex: 1;\n height: 1.5px;\n background: #D8D6D2;\n transition: background .25s ease;\n }\n\n .sp-line.filled {\n background: var(--brand);\n }\n\n @media (max-width: 400px) {\n .sp-node { width: 24px; height: 24px; font-size: 10px; }\n .sp-node.done::after { width: 8px; height: 5px; }\n .step-track { padding: 8px 14px 9px; }\n }\n\n \/* ============================================================\n LAYOUT\n ============================================================ *\/\n .quiz-page {\n max-width: var(--max-w);\n margin: 0 auto;\n padding: 36px 20px 128px;\n }\n\n \/* ============================================================\n SCREENS\n ============================================================ *\/\n .screen { display: none; }\n .screen.active { display: block; animation: slideUp .25s ease; }\n\n @keyframes slideUp {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* ============================================================\n INTRO SCREEN\n ============================================================ *\/\n .intro-wrap {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: 12px 0 8px;\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: .07em;\n text-transform: uppercase;\n padding: 5px 14px;\n border-radius: var(--radius-full);\n margin-bottom: 20px;\n }\n\n .badge-neutral { background: var(--accent-bg); color: var(--text-1); }\n .badge-green { background: var(--green-bg); color: var(--green-text); }\n\n .intro-title {\n font-size: clamp(26px, 6vw, 40px);\n font-weight: 700;\n line-height: 1.15;\n letter-spacing: -.03em;\n margin-bottom: 16px;\n max-width: 520px;\n }\n\n .intro-sub {\n font-size: 16px;\n color: var(--text-2);\n line-height: 1.65;\n max-width: 460px;\n margin-bottom: 32px;\n }\n\n .intro-cta {\n background: var(--text-1);\n color: #fff;\n border: none;\n border-radius: var(--radius-m);\n padding: 16px 40px;\n font-family: var(--font);\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n letter-spacing: -.01em;\n transition: opacity var(--transition);\n margin-bottom: 28px;\n }\n .intro-cta:hover { opacity: .82; }\n\n .trust-row {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n justify-content: center;\n margin-top: 4px;\n }\n\n .trust-pill {\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 12px;\n font-weight: 500;\n color: var(--text-2);\n background: var(--surface);\n border: 1px solid var(--border);\n padding: 5px 12px;\n border-radius: var(--radius-full);\n }\n\n \/* ============================================================\n QUESTION SCREENS\n ============================================================ *\/\n .btn-back {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: none;\n border: none;\n color: var(--text-2);\n font-family: var(--font);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n padding: 0;\n margin-bottom: 24px;\n }\n .btn-back:hover { color: var(--text-1); }\n\n .q-label {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: .08em;\n text-transform: uppercase;\n color: var(--text-3);\n margin-bottom: 10px;\n }\n\n .q-title {\n font-size: clamp(20px, 4.5vw, 30px);\n font-weight: 700;\n line-height: 1.2;\n letter-spacing: -.025em;\n margin-bottom: 8px;\n }\n\n .q-hint {\n font-size: 14px;\n color: var(--text-2);\n line-height: 1.6;\n margin-bottom: 28px;\n }\n\n \/* ============================================================\n OPTIONS GRID\n ============================================================ *\/\n .options-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n margin-bottom: 20px;\n }\n\n .options-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }\n\n .option-group-title {\n font-size: 12px;\n font-weight: 800;\n letter-spacing: .06em;\n text-transform: uppercase;\n color: var(--text-3);\n margin: 18px 0 10px;\n }\n\n .option-group-title:first-of-type { margin-top: 0; }\n\n @media (min-width: 500px) {\n .options-grid { grid-template-columns: repeat(3, 1fr); }\n .options-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }\n .options-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }\n }\n\n .option-card {\n position: relative;\n background: var(--surface);\n border: 1.5px solid var(--border);\n border-radius: var(--radius-m);\n padding: 14px 13px 14px;\n cursor: pointer;\n transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 7px;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .option-card:hover {\n border-color: #AEABA6;\n box-shadow: var(--shadow-s);\n }\n\n .option-card.selected {\n border-color: var(--border-active);\n background: var(--card-active);\n }\n\n .option-card.selected::after {\n content: '';\n position: absolute;\n top: 9px;\n right: 9px;\n width: 18px;\n height: 18px;\n background: var(--text-1) url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\") center \/ 11px no-repeat;\n border-radius: 50%;\n }\n\n .opt-icon {\n width: 22px;\n height: 22px;\n color: var(--text-2);\n flex-shrink: 0;\n display: block;\n }\n .opt-icon svg { width: 22px; height: 22px; display: block; }\n .option-card.selected .opt-icon { color: var(--text-1); }\n\n \/* Icon helper used in trust pills, badges, etc. *\/\n .ic {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n vertical-align: middle;\n }\n .ic svg { display: block; }\n\n .opt-label {\n font-size: 13px;\n font-weight: 600;\n color: var(--text-1);\n line-height: 1.35;\n }\n\n .opt-desc {\n font-size: 11.5px;\n color: var(--text-2);\n line-height: 1.4;\n }\n\n \/* ============================================================\n MICROCOPY BOX\n ============================================================ *\/\n .info-box {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-s);\n padding: 14px 16px;\n margin-bottom: 20px;\n }\n\n .info-box-title {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: .07em;\n text-transform: uppercase;\n color: var(--text-3);\n margin-bottom: 10px;\n }\n\n .info-row {\n display: flex;\n gap: 10px;\n font-size: 13px;\n color: var(--text-2);\n line-height: 1.5;\n margin-bottom: 6px;\n }\n .info-row:last-child { margin-bottom: 0; }\n .info-row strong { color: var(--text-1); font-weight: 600; min-width: 26px; }\n\n \/* ============================================================\n BUTTONS\n ============================================================ *\/\n .btn-primary {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n background: #2563EB;\n color: #fff;\n border: none;\n border-radius: 999px;\n padding: 16px 28px;\n font-family: var(--font);\n font-size: 15px;\n font-weight: 700;\n letter-spacing: -.01em;\n cursor: pointer;\n transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);\n box-shadow: 0 4px 14px rgba(37,99,235,.28);\n text-decoration: none;\n }\n .btn-primary:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37,99,235,.35); }\n .btn-primary:active { transform: translateY(0); }\n .btn-primary:disabled { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }\n\n .btn-anterior {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n flex-shrink: 0;\n background: transparent;\n color: var(--text-2);\n border: 1.5px solid var(--border);\n border-radius: 999px;\n padding: 14px 20px;\n font-family: var(--font);\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: border-color var(--transition), color var(--transition);\n white-space: nowrap;\n }\n .btn-anterior:hover { border-color: var(--text-2); color: var(--text-1); }\n\n .btn-outline {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n background: transparent;\n color: var(--text-1);\n border: 1.5px solid var(--border-active);\n border-radius: var(--radius-m);\n padding: 13px 24px;\n font-family: var(--font);\n font-size: 14px;\n font-weight: 600;\n letter-spacing: -.01em;\n cursor: pointer;\n transition: background var(--transition);\n text-decoration: none;\n }\n .btn-outline:hover { background: var(--card-active); }\n\n .btn-ghost {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n background: none;\n border: none;\n color: var(--text-2);\n font-family: var(--font);\n font-size: 13px;\n font-weight: 500;\n text-decoration: underline;\n text-underline-offset: 3px;\n padding: 10px;\n cursor: pointer;\n }\n\n .btn-whatsapp {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 9px;\n width: 100%;\n background: var(--whatsapp);\n color: #fff;\n border: none;\n border-radius: var(--radius-m);\n padding: 14px 24px;\n font-family: var(--font);\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: opacity var(--transition);\n text-decoration: none;\n }\n .btn-whatsapp:hover { opacity: .88; }\n .btn-red {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 9px;\n width: 100%;\n background: var(--brand);\n color: #fff;\n border: none;\n border-radius: var(--radius-m);\n padding: 14px 24px;\n font-family: var(--font);\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: opacity var(--transition);\n text-decoration: none;\n }\n .btn-red:hover { opacity: .9; }\n\n \/* ============================================================\n STICKY BOTTOM NAV\n ============================================================ *\/\n .sticky-nav {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: var(--surface);\n border-top: 1px solid var(--border);\n padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px));\n z-index: 150;\n display: none;\n box-shadow: 0 -6px 22px rgba(0,0,0,.06);\n }\n\n .sticky-nav-inner {\n max-width: var(--max-w);\n margin: 0 auto;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n \/* ============================================================\n LEAD FORM\n ============================================================ *\/\n .lead-wrap {\n text-align: center;\n margin-bottom: 28px;\n }\n\n .lead-form {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 20px;\n }\n\n .form-group { display: flex; flex-direction: column; gap: 5px; }\n\n .form-label {\n font-size: 13px;\n font-weight: 600;\n color: var(--text-1);\n }\n .form-label .opt { font-weight: 400; color: var(--text-3); margin-left: 4px; }\n\n .form-input {\n border: 1.5px solid var(--border);\n border-radius: var(--radius-s);\n padding: 11px 13px;\n font-family: var(--font);\n font-size: 15px;\n color: var(--text-1);\n background: var(--surface);\n width: 100%;\n outline: none;\n transition: border-color var(--transition);\n -webkit-appearance: none;\n }\n .form-input:focus { border-color: var(--text-1); }\n .form-input::placeholder { color: var(--text-3); }\n\n .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n\n .checkbox-row {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n cursor: pointer;\n font-size: 12.5px;\n color: var(--text-2);\n line-height: 1.55;\n }\n .checkbox-row input[type=\"checkbox\"] {\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n margin-top: 2px;\n accent-color: var(--text-1);\n cursor: pointer;\n }\n .checkbox-row a { color: var(--text-1); font-weight: 500; }\n\n .form-error {\n background: #FEF2F2;\n border: 1px solid #FECACA;\n border-radius: var(--radius-s);\n padding: 10px 14px;\n font-size: 13px;\n color: #DC2626;\n display: none;\n margin-bottom: 12px;\n }\n\n \/* ============================================================\n RESULTS SCREEN\n ============================================================ *\/\n .result-hero {\n text-align: center;\n margin-bottom: 28px;\n }\n\n .result-title {\n font-size: clamp(22px, 5vw, 34px);\n font-weight: 700;\n letter-spacing: -.03em;\n line-height: 1.15;\n margin-bottom: 12px;\n }\n\n .result-sub {\n font-size: 14px;\n color: var(--text-2);\n line-height: 1.65;\n max-width: 500px;\n margin: 0 auto;\n }\n\n \/* Main product card *\/\n .main-card {\n background: var(--surface);\n border: 2px solid var(--text-1);\n border-radius: var(--radius-l);\n overflow: hidden;\n margin-bottom: 20px;\n box-shadow: var(--shadow-m);\n }\n\n .main-card-hero{position:relative;width:100%;height:170px;background:var(--bg);border-bottom:1px solid var(--border)}\n .main-card-hero img{width:100%;height:100%;object-fit:cover;display:block}\n .hero-badge{position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--brand);color:#fff;padding:5px 11px;border-radius:var(--radius-full);box-shadow:0 2px 8px rgba(0,0,0,.18)}\n .main-card-top {\n padding: 20px 20px 0;\n display: flex;\n align-items: flex-start;\n gap: 14px;\n }\n\n .prod-thumb {\n width: 60px;\n height: 60px;\n border-radius: var(--radius-s);\n background: var(--bg);\n border: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 26px;\n flex-shrink: 0;\n }\n\n .prod-meta { flex: 1; }\n\n .prod-cat {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: .08em;\n text-transform: uppercase;\n color: var(--text-3);\n margin-bottom: 3px;\n }\n\n .prod-name {\n font-size: 19px;\n font-weight: 700;\n letter-spacing: -.02em;\n line-height: 1.2;\n margin-bottom: 3px;\n }\n\n .prod-price {\n font-size: 13px;\n color: var(--text-2);\n font-weight: 500;\n }\n\n .prod-label-badge {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: .06em;\n text-transform: uppercase;\n background: var(--text-1);\n color: #fff;\n padding: 3px 9px;\n border-radius: var(--radius-full);\n white-space: nowrap;\n }\n\n .main-card-body { padding: 16px 20px; }\n\n .prod-why {\n font-size: 14px;\n color: var(--text-2);\n line-height: 1.65;\n margin-bottom: 14px;\n }\n\n .prod-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: 16px;\n }\n\n .prod-tag {\n font-size: 11.5px;\n font-weight: 500;\n background: var(--bg);\n border: 1px solid var(--border);\n padding: 3px 10px;\n border-radius: var(--radius-full);\n color: var(--text-1);\n }\n\n .metrics-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1px;\n background: var(--border);\n border: 1px solid var(--border);\n border-radius: var(--radius-s);\n overflow: hidden;\n margin-bottom: 16px;\n }\n\n .metric-cell {\n background: var(--bg);\n padding: 12px 10px;\n text-align: center;\n }\n\n .metric-label {\n font-size: 10px;\n font-weight: 600;\n letter-spacing: .06em;\n text-transform: uppercase;\n color: var(--text-3);\n margin-bottom: 4px;\n }\n\n .metric-val {\n font-size: 12.5px;\n font-weight: 700;\n color: var(--text-1);\n }\n\n .motor-note {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--green-text);\n background: var(--green-bg);\n border-radius: var(--radius-s);\n padding: 8px 12px;\n margin-bottom: 4px;\n }\n\n .main-card-ctas {\n padding: 0 20px 20px;\n display: flex;\n flex-direction: column;\n gap: 9px;\n }\n\n \/* Divider *\/\n .rec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }\n @media (min-width: 620px) { .rec-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }\n .rec-card { display: flex; flex-direction: column; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-l); overflow: hidden; text-decoration: none; color: var(--text-1); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }\n .rec-card:hover { border-color: var(--brand); box-shadow: var(--shadow-m); transform: translateY(-2px); }\n .rec-card--best { border-color: var(--brand); border-width: 2px; box-shadow: var(--shadow-m); }\n .rec-img { position: relative; width: 100%; aspect-ratio: 4 \/ 3; background: var(--bg); }\n .rec-img img { width: 100%; height: 100%; object-fit: cover; display: block; }\n .rec-img--ph img { display: none; }\n .rec-best { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--brand); color: #fff; padding: 5px 10px; border-radius: var(--radius-full); box-shadow: 0 2px 8px rgba(0,0,0,.18); }\n .rec-pill { margin: -14px 10px 0; position: relative; z-index: 1; background: var(--accent-bg); color: var(--text-1); text-align: center; font-weight: 700; font-size: 12px; line-height: 1.25; padding: 7px 10px; border-radius: var(--radius-m); box-shadow: var(--shadow-s); }\n .rec-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }\n .rec-price { font-weight: 700; font-size: 14px; color: var(--brand); }\n .rec-why { font-size: 12px; color: var(--text-2); line-height: 1.4; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\n .rec-tags { display: flex; flex-wrap: wrap; gap: 5px; }\n .rec-tag { font-size: 10px; font-weight: 600; color: var(--text-3); background: var(--bg); border: 1px solid var(--border); padding: 2px 7px; border-radius: var(--radius-full); }\n .rec-cta { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--brand); }\n .result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }\n\n .section-label {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: .08em;\n text-transform: uppercase;\n color: var(--text-3);\n margin: 28px 0 12px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .section-label::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--border);\n }\n\n \/* Alternative cards *\/\n .alt-card {\n background: var(--surface);\n border: 1.5px solid var(--border);\n border-radius: var(--radius-m);\n padding: 14px 16px;\n display: flex;\n align-items: center;\n gap: 13px;\n margin-bottom: 10px;\n transition: border-color var(--transition);\n cursor: default;\n }\n .alt-card:hover { border-color: #AEABA6; }\n\n .alt-thumb {\n width: 44px;\n height: 44px;\n border-radius: var(--radius-s);\n background: var(--bg);\n border: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-2);\n flex-shrink: 0;\n }\n .alt-thumb svg { display: block; }\n .alt-thumb { overflow: hidden; }\n .alt-thumb img { width:100%; height:100%; object-fit:cover; display:block; }\n\n .alt-info { flex: 1; min-width: 0; }\n\n .alt-type {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: .07em;\n text-transform: uppercase;\n color: var(--text-3);\n margin-bottom: 2px;\n }\n\n .alt-name {\n font-size: 14px;\n font-weight: 700;\n letter-spacing: -.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .alt-desc {\n font-size: 12px;\n color: var(--text-2);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .alt-price {\n font-size: 13px;\n font-weight: 700;\n color: var(--text-1);\n flex-shrink: 0;\n text-align: right;\n margin-left: 8px;\n }\n\n \/* Trust block *\/\n .trust-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 8px;\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-m);\n padding: 14px 12px;\n margin: 18px 0;\n text-align: center;\n }\n\n .trust-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 5px;\n }\n .trust-lbl { font-size: 11.5px; font-weight: 600; color: var(--text-2); line-height: 1.2; }\n\n .trust-ico { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-2); display: flex; align-items: center; justify-content: center; margin-top: 1px; }\n .trust-ico svg { display: block; }\n\n .trust-copy strong {\n display: block;\n font-size: 13px;\n font-weight: 700;\n margin-bottom: 1px;\n }\n\n .trust-copy span {\n font-size: 11.5px;\n color: var(--text-2);\n }\n\n .restart-link {\n display: block;\n text-align: center;\n font-size: 12px;\n color: var(--text-3);\n text-decoration: underline;\n text-underline-offset: 3px;\n cursor: pointer;\n padding: 8px 0 32px;\n background: none;\n border: none;\n font-family: var(--font);\n width: 100%;\n }\n .restart-link:hover { color: var(--text-2); }\n\n \/* ============================================================\n RESPONSIVE\n ============================================================ *\/\n @media (max-width: 399px) {\n .form-row { grid-template-columns: 1fr; }\n .trust-grid { grid-template-columns: repeat(2, 1fr); }\n .options-grid { grid-template-columns: 1fr 1fr; }\n .options-grid.cols-3 { grid-template-columns: 1fr 1fr; }\n }\n\n @media (max-width: 499px) {\n .options-grid.cols-4 { grid-template-columns: 1fr 1fr; }\n }\n\n \/* ============================================================\n UTILITY\n ============================================================ *\/\n .mt-8 { margin-top: 8px; }\n .mt-12 { margin-top: 12px; }\n .mb-0 { margin-bottom: 0; }\n .text-center { text-align: center; }\n\n <\/style>\n<\/head>\n<body>\n\n<!-- ============================================================\n HEADER\n============================================================ -->\n<header class=\"quiz-header\">\n <div class=\"quiz-header-inner\">\n <a href=\"https:\/\/venetiansblinds.com\" class=\"logo\" aria-label=\"VenetiansBlinds\"><img decoding=\"async\" src=\"https:\/\/venetiansblinds.com\/img\/logo-1713185549.jpg\" alt=\"VenetiansBlinds\" class=\"logo-img\" width=\"150\" height=\"26\" style=\"height:26px!important;max-height:26px!important;width:auto!important;max-width:150px!important;display:block!important;object-fit:contain!important;\"><\/a>\n <\/div>\n <div class=\"step-track\" id=\"stepTrack\" style=\"display:none\">\n <div class=\"step-track-inner\">\n <div class=\"sp-node\" id=\"spn-1\"><span>1<\/span><\/div>\n <div class=\"sp-line\" id=\"spl-1\"><\/div>\n <div class=\"sp-node\" id=\"spn-2\"><span>2<\/span><\/div>\n <div class=\"sp-line\" id=\"spl-2\"><\/div>\n <div class=\"sp-node\" id=\"spn-3\"><span>3<\/span><\/div>\n <div class=\"sp-line\" id=\"spl-3\"><\/div>\n <div class=\"sp-node\" id=\"spn-4\"><span>4<\/span><\/div>\n <\/div>\n <\/div>\n<\/header>\n\n<!-- ============================================================\n MAIN QUIZ CONTENT\n============================================================ -->\n<main class=\"quiz-page\">\n\n\n <!-- \u2500\u2500 SCREEN 1: HABITACI\u00d3N \u2500\u2500 -->\n <!-- \u2500\u2500 SCREEN 1: PERFIL \u2500\u2500 -->\n <div class=\"screen active\" id=\"screen-1\">\n <p class=\"q-label\">Para empezar<\/p>\n <h2 class=\"q-title\">\u00bfPara qui\u00e9n es?<\/h2>\n <div class=\"options-grid cols-2\" id=\"q1-grid\">\n <div class=\"option-card\" data-q=\"1\" data-v=\"particular\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"toda_casa\"><\/span>\n <span class=\"opt-label\">Para mi hogar<\/span>\n <\/div>\n <div class=\"option-card\" data-q=\"1\" data-v=\"profesional\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"profesional\"><\/span>\n <span class=\"opt-label\">Proyecto profesional<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500 SCREEN 2: HUECO \u2500\u2500 -->\n <div class=\"screen\" id=\"screen-2\">\n <button class=\"btn-back\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <p class=\"q-label\">El hueco<\/p>\n <h2 class=\"q-title\">\u00bfD\u00f3nde lo vas a poner?<\/h2>\n <div class=\"options-grid cols-2\" id=\"q2-grid\">\n <div class=\"option-card\" data-q=\"2\" data-v=\"ventana\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"ventana\"><\/span>\n <span class=\"opt-label\">Ventana est\u00e1ndar<\/span>\n <\/div>\n <div class=\"option-card\" data-q=\"2\" data-v=\"ventana_pequena\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"ventana_peque\"><\/span>\n <span class=\"opt-label\">Ventana peque\u00f1a<\/span>\n <\/div>\n <div class=\"option-card\" data-q=\"2\" data-v=\"corredera\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"corredera\"><\/span>\n <span class=\"opt-label\">Puerta o cristalera corredera<\/span>\n <\/div>\n <div class=\"option-card\" data-q=\"2\" data-v=\"exterior\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"terraza\"><\/span>\n <span class=\"opt-label\">Terraza o exterior<\/span>\n <\/div>\n <div class=\"option-card\" data-q=\"2\" data-v=\"ventanal\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"ventanal\"><\/span>\n <span class=\"opt-label\">Pared o ventanal grande<\/span>\n <\/div>\n <div class=\"option-card\" data-q=\"2\" data-v=\"techo\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"dificil_acceso\"><\/span>\n <span class=\"opt-label\">Techo u oscilobatiente<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500 SCREEN 3: OBJETIVO \u2500\u2500 -->\n <div class=\"screen\" id=\"screen-3\">\n <button class=\"btn-back\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <p class=\"q-label\">Tu objetivo<\/p>\n <h2 class=\"q-title\">\u00bfQu\u00e9 quieres conseguir?<\/h2>\n <div class=\"options-grid cols-2\" id=\"q3-grid\">\n <div class=\"option-card\" data-q=\"3\" data-v=\"oscuridad\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"oscuridad\"><\/span>\n <span class=\"opt-label\">Oscuridad total<\/span>\n <\/div>\n <div class=\"option-card\" data-q=\"3\" data-v=\"privacidad_luz\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"privacidad_luz\"><\/span>\n <span class=\"opt-label\">Privacidad sin quedarme a oscuras<\/span>\n <\/div>\n <div class=\"option-card\" data-q=\"3\" data-v=\"control_solar\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"luz_calor\"><\/span>\n <span class=\"opt-label\">Controlar la luz y el calor<\/span>\n <\/div>\n <div class=\"option-card\" data-q=\"3\" data-v=\"insectos\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"insectos\"><\/span>\n <span class=\"opt-label\">Evitar insectos<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500 SCREEN 4: TALADRO \u2500\u2500 -->\n <div class=\"screen\" id=\"screen-4\">\n <button class=\"btn-back\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <p class=\"q-label\">Instalaci\u00f3n<\/p>\n <h2 class=\"q-title\">\u00bfPuedes taladrar?<\/h2>\n <p class=\"q-hint\">Tenemos soluciones sin taladro, ideales para alquileres o ventanas donde prefieres no hacer agujeros.<\/p>\n <div class=\"options-grid cols-2\" id=\"q4-grid\">\n <div class=\"option-card\" data-q=\"4\" data-v=\"si_taladro\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"si_taladro\"><\/span>\n <span class=\"opt-label\">S\u00ed, puedo taladrar<\/span>\n <\/div>\n <div class=\"option-card\" data-q=\"4\" data-v=\"no_taladro\" onclick=\"selectOption(this)\">\n <span class=\"opt-icon\" data-icon=\"no_taladro\"><\/span>\n <span class=\"opt-label\">No, prefiero no taladrar<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500 SCREEN 5: FORMULARIO PROFESIONAL \u2500\u2500 -->\n <div class=\"screen\" id=\"screen-5\">\n <button class=\"btn-back\" onclick=\"goBack()\">\u2190 Volver<\/button>\n <div class=\"lead-wrap\">\n <div class=\"badge badge-green\"><span class=\"ic\" data-icon=\"check_ok\" data-sz=\"13\"><\/span> Proyecto profesional<\/div>\n <h2 class=\"q-title mb-0\">Hablemos de tu proyecto<\/h2>\n <p class=\"q-hint mt-8\">D\u00e9janos tus datos y te enviamos condiciones para profesionales (arquitectura, interiorismo, contract, hosteler\u00eda).<\/p>\n <\/div>\n <div class=\"lead-form\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"pro-name\">Nombre<\/label>\n <input type=\"text\" class=\"form-input\" id=\"pro-name\" placeholder=\"Tu nombre o empresa\" autocomplete=\"name\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"pro-email\">Email<\/label>\n <input type=\"email\" class=\"form-input\" id=\"pro-email\" placeholder=\"tu@email.com\" autocomplete=\"email\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"pro-phone\">Tel\u00e9fono<\/label>\n <input type=\"tel\" class=\"form-input\" id=\"pro-phone\" placeholder=\"+34 600 000 000\" autocomplete=\"tel\">\n <\/div>\n <\/div>\n <div class=\"form-error\" id=\"pro-error\">Revisa los campos.<\/div>\n <button class=\"btn-primary\" onclick=\"submitPro()\">Enviar y ver soluciones para profesionales<\/button>\n <\/div>\n\n <div class=\"screen\" id=\"screen-8\">\n <!-- Populated dynamically by JS -->\n <\/div>\n\n<\/main>\n\n<!-- ============================================================\n STICKY BOTTOM NAV (questions only)\n============================================================ -->\n<div class=\"sticky-nav\" id=\"stickyNav\">\n <div class=\"sticky-nav-inner\">\n <button class=\"btn-anterior\" id=\"prevBtn\" onclick=\"goBack()\">\u2190 Anterior<\/button>\n <button class=\"btn-primary\" id=\"nextBtn\" onclick=\"goNext()\" disabled>Siguiente \u2192<\/button>\n <\/div>\n<\/div>\n\n\n<!-- ============================================================\n JAVASCRIPT\n============================================================ -->\n<script>\n'use strict';\n\n\/* PUNTO 3 \u2014 Pega aqui la URL de tu webhook de n8n \/ HubSpot para\n recibir los emails capturados. Si lo dejas vacio, solo se envia al dataLayer. *\/\nconst LEAD_WEBHOOK_URL = '';\n\n\/* ============================================================\n SVG ICON LIBRARY\n============================================================ *\/\nconst ICONS = {\n \/\/ rooms\n salon: `<rect x=\"2\" y=\"12\" width=\"20\" height=\"7\" rx=\"1\"\/><path d=\"M5 12v-2a3 3 0 016 0v2m8-2a3 3 0 00-6 0v2\"\/><path d=\"M2 16h20M5 19v2m14-2v2\"\/>`,\n dormitorio: `<path d=\"M2 20V9a2 2 0 012-2h16a2 2 0 012 2v11\"\/><path d=\"M2 14h20\"\/><rect x=\"6\" y=\"9\" width=\"5\" height=\"5\" rx=\".5\"\/>`,\n cocina: `<rect x=\"2\" y=\"11\" width=\"20\" height=\"10\" rx=\"1\"\/><circle cx=\"8\" cy=\"7\" r=\"2.5\"\/><circle cx=\"16\" cy=\"7\" r=\"2.5\"\/><path d=\"M2 15h20\"\/>`,\n bano: `<rect x=\"2\" y=\"12\" width=\"20\" height=\"8\" rx=\"1\"\/><path d=\"M2 16h20M5 20v2m14-2v2\"\/><path d=\"M7 12V8a3 3 0 016 0v4\"\/>`,\n oficina: `<rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"1\"\/><path d=\"M8 21h8M12 17v4\"\/>`,\n terraza: `<path d=\"M2 20h20M4 20V9l8-6 8 6v11\"\/><path d=\"M9 20v-5h6v5\"\/>`,\n ventanal: `<rect x=\"2\" y=\"3\" width=\"9\" height=\"18\" rx=\"1\"\/><rect x=\"13\" y=\"3\" width=\"9\" height=\"18\" rx=\"1\"\/><path d=\"M7 3v18M17 3v18\"\/>`,\n corredera: `<rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"1\"\/><path d=\"M12 3v14\"\/><path d=\"M6 21h12M8 19l-2 2 2 2m8-4 2 2-2 2\"\/>`,\n ventana: `<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1.5\"\/><path d=\"M12 3v18M3 12h18\"\/>`,\n ventana_peque: `<rect x=\"7\" y=\"7\" width=\"10\" height=\"10\" rx=\"1\"\/><path d=\"M7 12h10\"\/>`,\n toda_casa: `<path d=\"M3 12l9-8 9 8\"\/><path d=\"M5 10.5V20a1 1 0 001 1h12a1 1 0 001-1v-9.5\"\/><path d=\"M9 21v-5h6v5\"\/>`,\n \/\/ needs\n luz_calor: `<circle cx=\"12\" cy=\"12\" r=\"4\"\/><path d=\"M12 2v2m0 16v2M2 12h2m16 0h2m-3.5-7.5-1.5 1.5M7 17l-1.5 1.5m0-12.5L7 7m10.5 10.5 1.5 1.5\"\/>`,\n privacidad_luz: `<path d=\"M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/>`,\n oscuridad: `<path d=\"M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z\"\/>`,\n insectos: `<ellipse cx=\"12\" cy=\"14\" rx=\"3.5\" ry=\"5\"\/><circle cx=\"12\" cy=\"8\" r=\"2\"\/><path d=\"M9 11 6 8.5m3 4H3m6 4-3 3m9-10.5 3-2.5m-3 4.5h6m-6 4 3 3\"\/>`,\n diseno: `<path d=\"M12 2l2.5 7.5H22l-6.5 4.5 2.5 7.5L12 17l-6.5 4.5 2.5-7.5L2 9.5h7.5z\"\/>`,\n limpieza: `<path d=\"M12 22C8 22 5 18 5 14c0-5 7-12 7-12s7 7 7 12c0 4-3 8-7 8z\"\/>`,\n no_agujeros: `<circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M6 6l12 12\"\/>`,\n \/\/ light\n muy_poca: `<path d=\"M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z\"\/>`,\n media: `<circle cx=\"12\" cy=\"12\" r=\"4\"\/><path d=\"M12 2v2m0 16v2M2 12h2m16 0h2\"\/>`,\n mucha: `<circle cx=\"12\" cy=\"12\" r=\"4\"\/><path d=\"M12 2v2m0 16v2M2 12h2m16 0h2m-3.5-7.5-1.5 1.5M7 17l-1.5 1.5m0-12.5L7 7m10.5 10.5 1.5 1.5\"\/>`,\n nada: `<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M3 3l18 18\"\/>`,\n \/\/ style\n minimalista: `<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>`,\n natural: `<path d=\"M12 22v-8\"\/><path d=\"M12 14c0 0-5-2-6-7 3 0 6 2 6 7zm0 0c0 0 5-2 6-7-3 0-6 2-6 7z\"\/>`,\n calido_premium: `<path d=\"M12 2l2.5 7.5H22l-6.5 4.5 2.5 7.5L12 17l-6.5 4.5 2.5-7.5L2 9.5h7.5z\"\/>`,\n practico: `<path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"\/>`,\n decorativo: `<path d=\"M2 20h4L18.5 7.5l-4-4L2 16v4z\"\/><path d=\"M14.5 3.5l4 4\"\/>`,\n profesional: `<rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"1\"\/><path d=\"M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2\"\/><path d=\"M12 12v4m-2-2h4\"\/>`,\n \/\/ budget\n economico: `<path d=\"M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z\"\/><circle cx=\"7\" cy=\"7\" r=\"1.5\"\/>`,\n calidad_precio: `<path d=\"M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48 2.83-2.83\"\/>`,\n premium: `<path d=\"M2 8l3 12h14l3-12-6 4-4-8-4 8z\"\/>`,\n proyecto_grande:`<rect x=\"3\" y=\"9\" width=\"5\" height=\"12\"\/><rect x=\"9.5\" y=\"4\" width=\"5\" height=\"17\"\/><rect x=\"16\" y=\"13\" width=\"5\" height=\"8\"\/><path d=\"M2 21h20\"\/>`,\n \/\/ installation\n si_taladro: `<path d=\"M14 2l4 4-8 8-4-4z\"\/><path d=\"M6.5 14.5 3 19v3h2.5l3.5-4\"\/>`,\n prefiero_no: `<circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M8 12h8\"\/>`,\n no_taladro: `<circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M6 6l12 12\"\/>`,\n no_se: `<circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M9 9a3 3 0 015.8 1c0 2-3 3-3 3m0 4v.5\"\/>`,\n \/\/ motor\n si_motor: `<path d=\"M13 2 3 14h9l-1 8 10-12h-9z\"\/>`,\n no_motor: `<path d=\"M18 11V6a2 2 0 00-4 0v5M14 11V4a2 2 0 00-4 0v7M10 11V6a2 2 0 00-4 0v7a6 6 0 0012 0v-3a2 2 0 00-4 0\"\/>`,\n depende_precio: `<path d=\"M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01\"\/>`,\n dificil_acceso: `<path d=\"M2 20h20M4 20v-4h4v-4h4v-4h4v-4h4v12\"\/>`,\n \/\/ trust \/ ui\n gift: `<path d=\"M20 12v10H4V12\"\/><rect x=\"2\" y=\"7\" width=\"20\" height=\"5\" rx=\"1\"\/><path d=\"M12 22V7m0 0H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zm0 0h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z\"\/>`,\n measure: `<path d=\"M3 19 19 3M7 15l-1.5 1.5M10 12l-1.5 1.5M13 9l-1.5 1.5M16 6l-1.5 1.5\"\/>`,\n shield: `<path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><path d=\"M9 12l2 2 4-4\"\/>`,\n chat: `<path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\"\/>`,\n clock: `<circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5l3 3\"\/>`,\n check_ok: `<path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"\/><path d=\"M22 4 12 14.01l-3-3\"\/>`,\n lightning: `<path d=\"M13 2 3 14h9l-1 8 10-12h-9z\"\/>`,\n};\n\nfunction icon(name, size = 20) {\n const p = ICONS[name];\n if (!p) return '';\n return `<svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">${p}<\/svg>`;\n}\n\nfunction initIcons() {\n document.querySelectorAll('[data-icon]').forEach(el => {\n const name = el.dataset.icon;\n const size = parseInt(el.dataset.sz) || 20;\n el.innerHTML = icon(name, size);\n });\n}\n\n\/* ============================================================\n PRODUCT CATALOGUE\n============================================================ *\/\nconst PRODUCTS = {\n screen_basic: {\n id: \"screen_basic\", name: \"Estor Screen B\\u00e1sico\", category: \"Estores Screen\", price: \"Desde 45,99 \\u20ac\",\n material: \"screen\", huecos: {\"ventana\": 2, \"ventana_pequena\": 2, \"ventanal\": 1}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"solo_con\", margen: \"bajo\",\n url: \"https:\/\/venetiansblinds.com\/estores\/screen\/\", urlNd: \"https:\/\/venetiansblinds.com\/estores\/estores-sin-taladrar\/\",\n image: \"https:\/\/venetiansblinds.com\/356-medium_default\/estores-enrollables-screen-poliester.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n estor_exterior: {\n id: \"estor_exterior\", name: \"Estor Exterior\", category: \"Estores de Exterior\", price: \"Desde 45,99 \\u20ac\",\n material: \"screen\", huecos: {\"exterior\": 2, \"ventanal\": 1}, objetivos: [\"control_solar\"], taladro: \"solo_con\", margen: \"bajo\",\n url: \"https:\/\/venetiansblinds.com\/estores\/exterior\/\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/341-medium_default\/estores-enrollables-exterior-screen-sarga.jpg\", shortDesc: \"Resistente a la intemperie, para terrazas y exteriores.\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n blackout: {\n id: \"blackout\", name: \"Estor Opaco\", category: \"Estores Opacos\", price: \"Desde 45,99 \\u20ac\",\n material: \"screen\", huecos: {\"ventana\": 2, \"ventana_pequena\": 2, \"ventanal\": 1}, objetivos: [\"oscuridad\", \"control_solar\"], taladro: \"solo_con\", margen: \"medio\",\n url: \"https:\/\/venetiansblinds.com\/estores\/opacos\/\", urlNd: \"https:\/\/venetiansblinds.com\/estores\/estores-sin-taladrar\/\",\n image: \"https:\/\/venetiansblinds.com\/337-medium_default\/estores-enrollables-opaco-q-shade.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n no_drill_pleated: {\n id: \"no_drill_pleated\", name: \"Plisada Opaca (Sin Taladrar)\", category: \"Plisadas sin taladro\", price: \"Desde 45,99 \\u20ac\",\n material: \"plisada\", huecos: {\"ventana\": 1, \"ventana_pequena\": 2, \"corredera\": 1, \"techo\": 2}, objetivos: [\"oscuridad\", \"privacidad_luz\", \"control_solar\"], taladro: \"solo_sin\", margen: \"medio\",\n url: \"https:\/\/venetiansblinds.com\/cortinas-plisadas\/cortina-plisada-opaca-sin-taladrar-adhesivo\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/1775-medium_default\/cortina-plisada-opaca-sin-taladrar-adhesivo.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n clickfit: {\n id: \"clickfit\", name: \"Estor a Presi\\u00f3n (Sin Taladrar)\", category: \"Estores sin taladro\", price: \"Desde 45,99 \\u20ac\",\n material: \"screen\", huecos: {\"ventana\": 1, \"ventana_pequena\": 2}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"solo_sin\", margen: \"medio\",\n url: \"https:\/\/venetiansblinds.com\/estores\/estores-sin-taladrar\/\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/356-medium_default\/estores-enrollables-screen-poliester.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n day_and_night: {\n id: \"day_and_night\", name: \"Estor Noche y D\\u00eda\", category: \"Estores Noche y D\\u00eda\", price: \"Desde 47,99 \\u20ac\",\n material: \"noche_dia\", huecos: {\"ventana\": 2, \"ventana_pequena\": 2, \"ventanal\": 1}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"solo_con\", margen: \"medio\",\n url: \"https:\/\/venetiansblinds.com\/estores\/noche-y-dia\/\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/1230-medium_default\/estores-enrollables-traslucidos-noche-y-dia-plain.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n wooden_venetian: {\n id: \"wooden_venetian\", name: \"Veneciana de madera natural\", category: \"Venecianas de madera\", price: \"Desde 114,99 \\u20ac\",\n material: \"madera\", huecos: {\"ventana\": 2, \"ventana_pequena\": 1, \"corredera\": 1, \"ventanal\": 1, \"techo\": 1}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"ambos\", margen: \"alto\",\n url: \"https:\/\/venetiansblinds.com\/veneciana\/madera\/\", urlNd: \"https:\/\/venetiansblinds.com\/venecianas\/venecianas-sin-taladrar\/?q=Material-Madera\",\n image: \"https:\/\/venetiansblinds.com\/288-medium_default\/venecianas-de-madera-classic-wood.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n aluminium_venetian: {\n id: \"aluminium_venetian\", name: \"Veneciana de aluminio\", category: \"Venecianas de aluminio\", price: \"Desde 114,99 \\u20ac\",\n material: \"aluminio\", huecos: {\"ventana\": 2, \"ventana_pequena\": 1, \"ventanal\": 1, \"techo\": 1}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"ambos\", margen: \"medio\",\n url: \"https:\/\/venetiansblinds.com\/venecianas\/aluminio\/\", urlNd: \"https:\/\/venetiansblinds.com\/venecianas\/venecianas-sin-taladrar\/\",\n image: \"https:\/\/venetiansblinds.com\/1341-medium_default\/venecianas-aluminio.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n bamboo_venetian: {\n id: \"bamboo_venetian\", name: \"Veneciana de bamb\\u00fa\", category: \"Venecianas naturales\", price: \"Desde 114,99 \\u20ac\",\n material: \"bambu\", huecos: {\"ventana\": 2, \"ventana_pequena\": 1, \"corredera\": 1, \"ventanal\": 1, \"techo\": 1}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"ambos\", margen: \"alto\",\n url: \"https:\/\/venetiansblinds.com\/veneciana\/bambu\/\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/308-medium_default\/venecianas-de-madera-bambu.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n natural_fibre: {\n id: \"natural_fibre\", name: \"Estores de fibras naturales\", category: \"Estores naturales\", price: \"Desde 76,30 \\u20ac\",\n material: \"fibras\", huecos: {\"ventana\": 2, \"ventana_pequena\": 1, \"exterior\": 1, \"ventanal\": 1}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"solo_con\", margen: \"alto\",\n url: \"https:\/\/venetiansblinds.com\/estores\/fibras-naturales\/\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/1241-medium_default\/estores-enrollables-tradicional-de-fibras-naturales.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n japanese_panel: {\n id: \"japanese_panel\", name: \"Paneles japoneses Screen\", category: \"Paneles japoneses\", price: \"Desde 20,99 \\u20ac\",\n material: \"screen\", huecos: {\"corredera\": 2, \"ventanal\": 2}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"solo_con\", margen: \"medio\",\n url: \"https:\/\/venetiansblinds.com\/verticales\/paneles-japoneses\/\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/1464-medium_default\/paneles-japoneses-screen-poliester.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n vertical_screen: {\n id: \"vertical_screen\", name: \"Verticales Screen\", category: \"Verticales\", price: \"Desde 114,99 \\u20ac\",\n material: \"screen\", huecos: {\"ventana\": 1, \"corredera\": 2, \"ventanal\": 2}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"solo_con\", margen: \"medio\",\n url: \"https:\/\/venetiansblinds.com\/verticales\/cortinas-verticales-screen\/\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/1697-medium_default\/muestras-verticales-traslucido-shatung.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n wooden_alicante: {\n id: \"wooden_alicante\", name: \"Persiana alicantina de madera\", category: \"Alicantinas exterior\", price: \"Desde 22,30 \\u20ac\",\n material: \"madera\", huecos: {\"ventana\": 1, \"ventana_pequena\": 1, \"exterior\": 2}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"solo_con\", margen: \"bajo\",\n url: \"https:\/\/venetiansblinds.com\/persianas\/persianas-alicantinas\/\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/1149-medium_default\/persianas-alicantinas-de-madera.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n pvc_alicante: {\n id: \"pvc_alicante\", name: \"Persiana alicantina PVC\", category: \"Alicantinas exterior\", price: \"Desde 22,30 \\u20ac\",\n material: \"pvc\", huecos: {\"ventana\": 1, \"ventana_pequena\": 1, \"exterior\": 2}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"solo_con\", margen: \"bajo\",\n url: \"https:\/\/venetiansblinds.com\/persianas\/persianas-alicantinas\/\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/1301-medium_default\/persianas-alicantinas-de-pvc.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n fly_screen: {\n id: \"fly_screen\", name: \"Mosquitera enrollable\", category: \"Mosquiteras\", price: \"Desde 11,99 \\u20ac\",\n material: \"mosquitera\", huecos: {\"ventana\": 1, \"ventana_pequena\": 1, \"exterior\": 1, \"ventanal\": 1}, objetivos: [\"insectos\"], taladro: \"ambos\", margen: \"medio\",\n url: \"https:\/\/venetiansblinds.com\/mosquiteras\/enrollable\/mosquitera-enrollable-a-medida\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/1288-medium_default\/mosquitera-enrollable-a-medida.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n perfectfix: {\n id: \"perfectfix\", name: \"Estor Enroscable (Sin Taladrar)\", category: \"Estores sin taladro\", price: \"Desde 45,99 \\u20ac\",\n material: \"screen\", huecos: {\"ventana\": 1, \"ventana_pequena\": 2}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"solo_sin\", margen: \"medio\",\n url: \"https:\/\/venetiansblinds.com\/estores\/estores-sin-taladrar\/?q=Caracter%C3%ADsticas-Sin+Taladrar+Enroscable+EasyFit\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/356-medium_default\/estores-enrollables-screen-poliester.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n estor_madera: {\n id: \"estor_madera\", name: \"Estor de Madera\", category: \"Estores de Madera\", price: \"Desde 76,30 \\u20ac\",\n material: \"madera\", huecos: {\"ventana\": 2, \"ventana_pequena\": 1, \"ventanal\": 1, \"techo\": 1}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"ambos\", margen: \"alto\",\n url: \"https:\/\/venetiansblinds.com\/estores\/enrrollables-madera\/?q=Producto-Enrollables\", urlNd: \"https:\/\/venetiansblinds.com\/estores\/enrrollables-madera\/?q=Caracter%C3%ADsticas-Sin+taladrar\",\n image: \"https:\/\/venetiansblinds.com\/312-medium_default\/estores-enrollables-de-madera.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n veneciana_mini: {\n id: \"veneciana_mini\", name: \"Veneciana Mini\", category: \"Venecianas Mini\", price: \"Desde 14,99 \\u20ac\",\n material: \"aluminio\", huecos: {\"ventana\": 1, \"ventana_pequena\": 2, \"techo\": 1}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"ambos\", margen: \"medio\",\n url: \"https:\/\/venetiansblinds.com\/venecianas\/mini\/\", urlNd: \"https:\/\/venetiansblinds.com\/venecianas\/venecianas-sin-taladrar\/\",\n image: \"https:\/\/venetiansblinds.com\/1340-medium_default\/venecianas-aluminio.jpg\", shortDesc: \"\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n vertical_madera: {\n id: \"vertical_madera\", name: \"Verticales de Madera\", category: \"Verticales de Madera\", price: \"Desde 114,99 \\u20ac\",\n material: \"madera\", huecos: {\"corredera\": 2, \"ventanal\": 2}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"solo_con\", margen: \"alto\",\n url: \"https:\/\/venetiansblinds.com\/verticales\/cortinas-verticales-madera\/\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/1391-medium_default\/verticales-de-madera-classic-wood.jpg\", shortDesc: \"Lamas verticales de madera para puertas y grandes superficies.\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n veneciana_exterior: {\n id: \"veneciana_exterior\", name: \"Veneciana de Madera Exterior\", category: \"Venecianas Exterior\", price: \"Desde 105,99 \\u20ac\",\n material: \"madera\", huecos: {\"ventana\": 1, \"ventana_pequena\": 1, \"exterior\": 2, \"ventanal\": 1}, objetivos: [\"privacidad_luz\", \"control_solar\"], taladro: \"solo_con\", margen: \"alto\",\n url: \"https:\/\/venetiansblinds.com\/venecianas\/venecianas-de-madera-exterior\/\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/1105-medium_default\/venecianas-de-madera-exterior.jpg\", shortDesc: \"Veneciana de madera tratada para exterior.\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n fly_screen_plisadas: {\n id: \"fly_screen_plisadas\", name: \"Mosquitera plisada\", category: \"Mosquiteras\", price: \"Desde 11,99 \\u20ac\",\n material: \"mosquitera\", huecos: {\"corredera\": 1, \"exterior\": 1, \"ventanal\": 1}, objetivos: [\"insectos\"], taladro: \"solo_con\", margen: \"medio\",\n url: \"https:\/\/venetiansblinds.com\/mosquiteras\/plisada\/mosquitera-plisada-a-medida\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/1288-medium_default\/mosquitera-enrollable-a-medida.jpg\", shortDesc: \"Mosquitera plisada, ideal para puertas y huecos grandes.\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n estor_marco: {\n id: \"estor_marco\", name: \"Estor para Marco de Ventana\", category: \"Estores Marco de Ventana\", price: \"Desde 45,99 \\u20ac\",\n material: \"screen\", huecos: {\"ventana\": 1, \"ventana_pequena\": 2, \"ventanal\": 1, \"techo\": 2}, objetivos: [\"oscuridad\", \"privacidad_luz\", \"control_solar\"], taladro: \"solo_con\", margen: \"bajo\",\n url: \"https:\/\/venetiansblinds.com\/estores\/perfect-fix\/\", urlNd: \"\",\n image: \"https:\/\/venetiansblinds.com\/356-medium_default\/estores-enrollables-screen-poliester.jpg\", shortDesc: \"Se fija al marco de la ventana, sin taladrar la pared.\", samplesUrl: \"https:\/\/panelmuestras.venetiansblinds.com\/customizer\",\n },\n};\n\n\/* ============================================================\n STATE\n============================================================ *\/\nlet currentScreen = 0;\nconst TOTAL_QUESTIONS = 6;\nconst answers = {};\nlet scores = {};\nlet autoAdvanceTimer = null;\n\nfunction initScores() {\n scores = {};\n Object.keys(PRODUCTS).forEach(k => { scores[k] = 0; });\n}\ninitScores();\n\n\/* ============================================================\n SCORING RULES\n Each answer adds points to product categories.\n============================================================ *\/\n\/* ============================================================\n MOTOR DETERMINISTA\n Tu controlas exactamente que 3 productos se muestran en cada\n combinacion del quiz. El orden del array = orden en pantalla:\n products[0] -> Recomendado (principal)\n products[1] -> alternativa\n products[2] -> alternativa\n============================================================ *\/\n\/* ============================================================\n MOTOR DE RECOMENDACI\u00d3N (lineal)\n answers.q1=perfil \u00b7 q2=hueco \u00b7 q3=objetivo \u00b7 q4=taladro\n Devuelve [principal, alt, alt] como ids de PRODUCTS.\n============================================================ *\/\nfunction decideProducts(a) {\n const hueco = a.q2, obj = a.q3;\n const noDrill = a.q4 === 'no_taladro';\n const talOK = p => noDrill\n ? (p.taladro === 'ambos' || p.taladro === 'solo_sin')\n : (p.taladro === 'ambos' || p.taladro === 'solo_con');\n\n \/\/ Solo productos que encajan en el hueco (nunca recomendamos algo de otro hueco)\n let pool = Object.values(PRODUCTS).filter(p => p.huecos[hueco] !== undefined);\n if (!pool.length) pool = [PRODUCTS.screen_basic];\n\n \/\/ Nivel de encaje: 0 = objetivo + taladro, 1 = solo objetivo, 2 = solo taladro, 3 = solo hueco\n const tier = p => {\n const o = p.objetivos.includes(obj), t = talOK(p);\n return o && t ? 0 : o ? 1 : t ? 2 : 3;\n };\n const margRank = { alto: 0, medio: 1, bajo: 2 };\n const mats = getSampledMaterials();\n\n pool.sort((x, y) => {\n const tx = tier(x), ty = tier(y);\n if (tx !== ty) return tx - ty; \/\/ 1) encaje objetivo + taladro\n const fx = x.huecos[hueco] || 1, fy = y.huecos[hueco] || 1;\n if (fx !== fy) return fy - fx; \/\/ 2) idoneidad del hueco (ideal > compatible)\n const bx = mats.includes(x.material) ? 0 : 1, by = mats.includes(y.material) ? 0 : 1;\n if (bx !== by) return bx - by; \/\/ 3) material muestreado\n return (margRank[x.margen] ?? 1) - (margRank[y.margen] ?? 1); \/\/ 4) margen\n });\n if (mats.length && mats.includes(pool[0].material)) datalayer('quiz_sample_bias', { materials: mats.join(','), promoted: pool[0].id });\n return pool.slice(0, 3).map(p => p.id);\n}\n\n\/* Colecci\u00f3n econ\u00f3mica (solo existe en venecianas y estores) *\/\nconst ECON_URL = {\n veneciana: 'https:\/\/venetiansblinds.com\/venecianas\/madera\/veneciana-madera-barata-a-medida',\n estor: 'https:\/\/venetiansblinds.com\/estores\/screen\/estores-screen-baratos-a-medida',\n};\nconst ECON_KIND = {\n wooden_venetian: 'veneciana', aluminium_venetian: 'veneciana', bamboo_venetian: 'veneciana',\n screen_basic: 'estor', blackout: 'estor', day_and_night: 'estor',\n clickfit: 'estor', no_drill_pleated: 'estor', perfectfix: 'estor',\n};\n\n\/* Material muestreado: ?mat=madera,aluminio (normaliza alias) *\/\nfunction getSampledMaterials() {\n try {\n const v = new URLSearchParams(location.search).get('mat');\n if (!v) return [];\n const alias = { fibras_naturales: 'fibras', noche_y_dia: 'noche_dia', 'bamb\\u00fa': 'bambu' };\n return v.toLowerCase().split(',').map(x => {\n const k = x.trim().replace(\/[\\s-]+\/g, '_');\n return alias[k] || k;\n }).filter(Boolean);\n } catch (e) { return []; }\n}\n\nfunction getRecommendations() {\n const ids = decideProducts(answers);\n const noDrill = answers.q4 === 'no_taladro';\n const pick = id => {\n const pr = id ? PRODUCTS[id] : null;\n if (!pr) return null;\n return (noDrill && pr.urlNd) ? { ...pr, url: pr.urlNd } : pr;\n };\n const main = pick(ids[0]) || PRODUCTS.screen_basic;\n return { main, budgetAlt: pick(ids[1]), premiumAlt: pick(ids[2]) };\n}\n\n\/* ============================================================\n WHY-TEXT GENERATOR\n============================================================ *\/\nfunction buildWhyText(product) {\n const a = answers;\n const place = {\n ventana: 'tu ventana', ventana_pequena: 'tu ventana peque\\u00f1a',\n corredera: 'tu puerta o cristalera corredera',\n exterior: 'tu terraza o exterior', ventanal: 'tu ventanal o pared',\n techo: 'tu techo o ventana oscilobatiente',\n }[a.q2] || 'tu espacio';\n const goal = {\n oscuridad: 'conseguir oscuridad total',\n privacidad_luz: 'tener privacidad sin quedarte a oscuras',\n control_solar: 'controlar la luz y el calor',\n insectos: 'protegerte de los insectos',\n }[a.q3] || '';\n const noDrill = a.q4 === 'no_taladro' ? ' y sin taladrar' : '';\n return `Encaja contigo porque buscas ${goal} en ${place}${noDrill}. ${product.longDesc}`;\n}\n\nfunction buildIntro() {\n const a = answers;\n const place = {\n ventana: 'tu ventana', ventana_pequena: 'tu ventana peque\\u00f1a',\n corredera: 'tu puerta o cristalera corredera',\n exterior: 'tu terraza o exterior', ventanal: 'tu ventanal o pared',\n techo: 'tu techo o ventana oscilobatiente',\n }[a.q2] || 'tu espacio';\n const goal = {\n oscuridad: 'conseguir oscuridad total',\n privacidad_luz: 'tener privacidad sin quedarte a oscuras',\n control_solar: 'controlar la luz y el calor',\n insectos: 'protegerte de los insectos',\n }[a.q3] || 'tu necesidad';\n const noDrill = a.q4 === 'no_taladro' ? ' y sin taladrar' : '';\n return `Para ${goal} en ${place}${noDrill}, estas son tus mejores opciones. Elige la que m\\u00e1s te encaje:`;\n}\n\n\/* ============================================================\n NAVIGATION\n============================================================ *\/\nfunction startQuiz() {\n datalayer('quiz_start', {});\n goToScreen(1);\n}\n\nfunction goToScreen(n) {\n clearTimeout(autoAdvanceTimer);\n document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));\n document.getElementById('screen-' + n).classList.add('active');\n currentScreen = n;\n updateChrome();\n window.scrollTo({ top: 0, behavior: 'instant' });\n\n if (n >= 1 && n <= 4) {\n datalayer('quiz_step_view', { step_number: n });\n }\n}\n\nfunction goNext() {\n if (currentScreen === 1) {\n \/\/ Ramificaci\u00f3n: el profesional va al formulario; el particular contin\u00faa\n if (answers.q1 === 'profesional') { goToScreen(5); }\n else { goToScreen(2); }\n } else if (currentScreen === 2 || currentScreen === 3) {\n goToScreen(currentScreen + 1);\n } else if (currentScreen === 4) {\n datalayer('quiz_completed', {\n perfil: answers.q1, hueco: answers.q2, objetivo: answers.q3, taladro: answers.q4,\n });\n renderResults();\n }\n}\n\nfunction goBack() {\n if (currentScreen === 5) { goToScreen(1); }\n else if (currentScreen > 1) { goToScreen(currentScreen - 1); }\n \/\/ primera pregunta: sin retroceso (el bot\u00f3n Volver est\u00e1 oculto)\n}\n\nfunction updateChrome() {\n const nav = document.getElementById('stickyNav');\n const nextBtn = document.getElementById('nextBtn');\n const prevBtn = document.getElementById('prevBtn');\n const track = document.getElementById('stepTrack');\n\n const isQuestion = currentScreen >= 1 && currentScreen <= 4;\n track.style.display = isQuestion ? 'block' : 'none';\n\n if (currentScreen === 0 || currentScreen === 5 || currentScreen === 8) {\n nav.style.display = 'none';\n } else if (isQuestion) {\n nav.style.display = 'flex';\n nextBtn.disabled = !answers['q' + currentScreen];\n prevBtn.style.display = currentScreen === 1 ? 'none' : 'flex';\n updateStepNodes(currentScreen);\n }\n}\n\nfunction updateStepNodes(activeStep) {\n for (let i = 1; i <= 4; i++) {\n const node = document.getElementById('spn-' + i);\n const line = document.getElementById('spl-' + i);\n if (!node) continue;\n\n node.classList.remove('active', 'done');\n\n if (i < activeStep) {\n node.classList.add('done');\n } else if (i === activeStep) {\n node.classList.add('active');\n }\n\n if (line) {\n line.classList.toggle('filled', i < activeStep);\n }\n }\n}\n\n\/* ============================================================\n OPTION SELECTION\n============================================================ *\/\nfunction selectOption(el) {\n const q = el.dataset.q;\n const v = el.dataset.v;\n\n \/\/ Clear previous selection\n document.querySelectorAll(`[data-q=\"${q}\"]`).forEach(c => c.classList.remove('selected'));\n\n \/\/ Select this card\n el.classList.add('selected');\n answers['q' + q] = v;\n\n \/\/ Enable next button\n const nextBtn = document.getElementById('nextBtn');\n if (nextBtn) nextBtn.disabled = false;\n\n datalayer('quiz_answer_selected', {\n step_number: currentScreen,\n question_id: 'q' + q,\n answer_value: v,\n });\n\n \/\/ Auto-avance: al elegir una opcion, pasa solo al siguiente paso\n clearTimeout(autoAdvanceTimer);\n autoAdvanceTimer = setTimeout(goNext, 260);\n}\n\n\/* ============================================================\n (Pantalla de captura de lead eliminada a peticion)\n============================================================ *\/\n\n\n\/* ============================================================\n REDIRECT TO LANDING\n Builds URL params from quiz answers and sends user to the\n product landing page. Replace base URLs per product once\n real landing pages are live (see landing-pages-mapa.md).\n============================================================ *\/\nfunction redirectToLanding() {\n \/* Obsoleto: el quiz ahora muestra el resultado en pagina con renderResults().\n Se conserva el stub vacio por seguridad de referencias. *\/\n renderResults();\n}\n\n\/* ============================================================\n RESULTS RENDERER\n============================================================ *\/\nconst PRODUCT_ICON_KEYS = {\n screen_basic: 'luz_calor', screen_saver: 'economico', blackout: 'oscuridad',\n no_drill_pleated: 'no_taladro', clickfit: 'prefiero_no', day_and_night: 'privacidad_luz',\n wooden_venetian: 'calido_premium', aluminium_venetian: 'practico', bamboo_venetian: 'natural',\n natural_fibre: 'decorativo', japanese_panel: 'ventanal', vertical_screen: 'profesional',\n wooden_alicante: 'terraza', pvc_alicante: 'limpieza', fly_screen: 'insectos',\n};\n\nconst MOTOR_NOTES = {\n wooden_venetian: 'Para motorizarla, elige la lama de 50 mm (la de 25 mm no admite motor).',\n bamboo_venetian: 'Disponible con motor \u2014 conf\u00edrmanos el modelo para verificar compatibilidad.',\n natural_fibre: 'Disponible con motor \u2014 conf\u00edrmanos el modelo para verificar compatibilidad.',\n};\n\nfunction renderResults() {\n const { main, budgetAlt, premiumAlt } = getRecommendations();\n const wantsMotor = !!MOTOR_NOTES[main.id]; \/\/ ahora se muestra como upsell para productos motorizables\n const whatsappTxt = encodeURIComponent(\n `Hola, acabo de hacer el test de VenetiansBlinds y me han recomendado ${main.name}. \u00bfMe pod\u00e9is ayudar con m\u00e1s informaci\u00f3n y medidas?`\n );\n const waUrl = `https:\/\/wa.me\/34618622347?text=${whatsappTxt}`;\n const econKind = ECON_KIND[main.id];\n const econHtml = econKind ? `\n <a href=\"${econKind === 'veneciana' ? ECON_URL.veneciana : ECON_URL.estor}\" target=\"_blank\" rel=\"noopener noreferrer\" onclick=\"datalayer('quiz_econ_click', { recommended_product: '${main.id}' })\" style=\"display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--accent-bg);border-radius:var(--radius-m);padding:14px 16px;margin:14px 0;text-decoration:none;color:var(--text-1);font-weight:600;font-size:14px\">\n <span>\u00bfLo quieres m\u00e1s econ\u00f3mico? Ver la colecci\u00f3n econ\u00f3mica<\/span><span aria-hidden=\"true\">\u2192<\/span>\n <\/a>` : '';\n\n const recs = [main, budgetAlt, premiumAlt].filter(Boolean);\n const _seen = new Set();\n const uniqueRecs = recs.filter(p => !_seen.has(p.id) && _seen.add(p.id));\n const recsHtml = uniqueRecs.map((p, i) => `\n <a class=\"rec-card${i===0 ? ' rec-card--best' : ''}\" href=\"${p.url}\" target=\"_blank\" rel=\"noopener noreferrer\" onclick=\"handleProductClick('${p.id}', '${p.url}')\">\n <div class=\"rec-img\">\n <img decoding=\"async\" src=\"${p.image}\" alt=\"${p.name}\" loading=\"lazy\" onerror=\"this.closest('.rec-img').classList.add('rec-img--ph')\">\n ${i===0 ? '<span class=\"rec-best\">\\u2605 Mejor opci\\u00f3n<\/span>' : ''}\n <\/div>\n <div class=\"rec-pill\">${p.name}<\/div>\n <div class=\"rec-body\">\n <span class=\"rec-price\">${p.price}<\/span>\n <p class=\"rec-why\">${p.shortDesc}<\/p>\n <span class=\"rec-cta\">Configurar y ver mi precio \\u2192<\/span>\n <\/div>\n <\/a>`).join('');\n\n const html = `\n <!-- HERO -->\n <div class=\"result-hero\">\n <div class=\"badge badge-green\" style=\"margin-bottom:14px\">\\u2713 Test completado<\/div>\n <h1 class=\"result-title\">Nuestras recomendaciones para ti<\/h1>\n <p class=\"result-sub\">${buildIntro()}<\/p>\n <\/div>\n\n <!-- GALER\\u00cdA DE RECOMENDACIONES -->\n <div class=\"rec-grid\">\n ${recsHtml}\n <\/div>\n\n ${wantsMotor ? `\n <div class=\"motor-note\" style=\"margin:2px 0 16px\">\n ${icon('lightning', 15)} <span>${MOTOR_NOTES[main.id] || 'Motorizaci\\u00f3n disponible \\u2014 cons\\u00faltanos.'}<\/span>\n <\/div>` : ''}\n\n <!-- ACCIONES -->\n <div class=\"result-actions\">\n <a class=\"btn-red\" href=\"${main.samplesUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" onclick=\"handleSamplesClick('${main.id}', '${main.samplesUrl}')\">\n ${icon('gift', 16)} Pedir muestras gratis\n <\/a>\n <a class=\"btn-whatsapp\" href=\"${waUrl}\" target=\"_blank\" rel=\"noopener noreferrer\" onclick=\"handleWhatsappClick('${main.id}', '${waUrl}')\">\n ${whatsappSvg()}\n Hablar con un asesor\n <\/a>\n <\/div>\n\n ${econHtml}\n\n <!-- EMAIL CAPTURE (una l\\u00ednea) -->\n <div id=\"emailCapture\" style=\"display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:10px 12px;margin:14px 0;box-shadow:var(--shadow-s)\">\n <span style=\"font-size:13px;color:var(--text-2);white-space:nowrap\">\\ud83d\\udce9 Te las guardamos:<\/span>\n <input type=\"email\" id=\"result-email\" class=\"form-input\" placeholder=\"tu@email.com\" autocomplete=\"email\" style=\"flex:1;min-width:150px\">\n <button class=\"btn-primary\" style=\"width:auto;flex-shrink:0\" onclick=\"saveResultEmail()\">Enviar<\/button>\n <p id=\"email-capture-msg\" style=\"font-size:13px;margin:0;flex-basis:100%\"><\/p>\n <\/div>\n\n <!-- TRUST BLOCK (compacto) -->\n <div class=\"trust-grid\">\n <div class=\"trust-item\"><span class=\"trust-ico\">${icon('gift', 18)}<\/span><span class=\"trust-lbl\">Muestras gratis<\/span><\/div>\n <div class=\"trust-item\"><span class=\"trust-ico\">${icon('measure', 18)}<\/span><span class=\"trust-lbl\">A medida<\/span><\/div>\n <div class=\"trust-item\"><span class=\"trust-ico\">${icon('shield', 18)}<\/span><span class=\"trust-lbl\">Garant\\u00eda 5 a\\u00f1os<\/span><\/div>\n <div class=\"trust-item\"><span class=\"trust-ico\">${icon('chat', 18)}<\/span><span class=\"trust-lbl\">Asesor gratis<\/span><\/div>\n <\/div>\n\n <button class=\"restart-link\" onclick=\"restartQuiz()\">\u21a9 Volver a empezar desde el principio<\/button>\n `;\n\n document.getElementById('screen-8').innerHTML = html;\n goToScreen(8);\n\n datalayer('quiz_result_viewed', {\n recommended_product: main.name,\n recommended_category: main.category,\n perfil: answers.q1,\n hueco: answers.q2,\n objetivo: answers.q3,\n taladro: answers.q4,\n alt_1: budgetAlt?.name || '',\n alt_2: premiumAlt?.name || '',\n });\n}\n\nfunction submitPro() {\n const name = (document.getElementById('pro-name').value || '').trim();\n const email = (document.getElementById('pro-email').value || '').trim();\n const phone = (document.getElementById('pro-phone').value || '').trim();\n const err = document.getElementById('pro-error');\n err.style.display = 'none';\n const fail = (m) => { err.textContent = m; err.style.display = 'block'; };\n if (!name) return fail('Introduce tu nombre o empresa.');\n if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) return fail('Introduce un email v\u00e1lido.');\n if (phone.replace(\/\\D\/g, '').length < 9) return fail('Introduce un tel\u00e9fono v\u00e1lido.');\n\n datalayer('quiz_pro_lead', { email_domain: email.split('@')[1] || '', has_phone: true });\n if (LEAD_WEBHOOK_URL) {\n fetch(LEAD_WEBHOOK_URL, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ tipo: 'profesional', name, email, phone, answers }),\n }).catch(() => {});\n }\n window.location.href = 'https:\/\/venetiansblinds.com\/content\/business';\n}\n\nfunction saveResultEmail() {\n const input = document.getElementById('result-email');\n const msg = document.getElementById('email-capture-msg');\n const email = (input.value || '').trim();\n if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) {\n msg.style.color = '#b91c1c';\n msg.textContent = 'Introduce un email v\u00e1lido.';\n return;\n }\n const { main } = getRecommendations();\n datalayer('quiz_result_email', {\n recommended_product: main.name,\n recommended_category: main.category,\n email_domain: email.split('@')[1] || '',\n });\n if (LEAD_WEBHOOK_URL) {\n fetch(LEAD_WEBHOOK_URL, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ email, recommended_product: main.name, recommended_category: main.category, answers }),\n }).catch(() => {});\n }\n document.getElementById('emailCapture').innerHTML =\n '<p style=\"font-weight:700;color:var(--green-text);margin:0\">\u2713 \u00a1Hecho! Te hemos guardado tu recomendaci\u00f3n y te llegar\u00e1 al correo.<\/p>';\n}\n\nfunction whatsappSvg() {\n return `<svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"white\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z\"\/><\/svg>`;\n}\n\n\/* ============================================================\n CLICK HANDLERS\n============================================================ *\/\nfunction handleProductClick(productId, url) {\n datalayer('quiz_product_click', {\n recommended_product: PRODUCTS[productId]?.name || productId,\n url,\n });\n}\n\nfunction handleSamplesClick(productId, url) {\n datalayer('quiz_sample_click', {\n recommended_product: PRODUCTS[productId]?.name || productId,\n });\n}\n\nfunction handleWhatsappClick(productId, url) {\n datalayer('quiz_whatsapp_click', {\n recommended_product: PRODUCTS[productId]?.name || productId,\n });\n}\n\nfunction restartQuiz() {\n Object.keys(answers).forEach(k => delete answers[k]);\n initScores();\n goToScreen(0);\n}\n\n\/* ============================================================\n ANALYTICS \u2014 dataLayer\n============================================================ *\/\nfunction datalayer(event, data) {\n window.dataLayer = window.dataLayer || [];\n const payload = {\n event,\n quiz_name: 'venetiansblinds_product_finder',\n step_number: data.step_number ?? currentScreen,\n question_id: data.question_id ?? '',\n answer_value: data.answer_value ?? '',\n recommended_product: data.recommended_product ?? '',\n recommended_category: data.recommended_category ?? '',\n perfil: data.perfil ?? answers.q1 ?? '',\n hueco: data.hueco ?? answers.q2 ?? '',\n objetivo: data.objetivo ?? answers.q3 ?? '',\n taladro: data.taladro ?? answers.q4 ?? '',\n ...data,\n };\n window.dataLayer.push(payload);\n if (typeof console !== 'undefined') {\n console.log('[Quiz DataLayer]', event, payload);\n }\n}\n\n\/* ============================================================\n INIT\n============================================================ *\/\ngoToScreen(1);\ninitIcons();\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Encuentra tu persiana ideal \u00b7 VenetiansBlinds 1 2 3 4 Para empezar \u00bfPara qui\u00e9n es? Para mi hogar Proyecto profesional \u2190 Volver El hueco \u00bfD\u00f3nde lo vas a poner? Ventana est\u00e1ndar Ventana peque\u00f1a Puerta o cristalera corredera Terraza o exterior Pared o ventanal grande Techo u oscilobatiente \u2190 Volver Tu objetivo \u00bfQu\u00e9 quieres conseguir? Oscuridad […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-154","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/muestras.venetiansblinds.com\/index.php\/wp-json\/wp\/v2\/pages\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/muestras.venetiansblinds.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/muestras.venetiansblinds.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/muestras.venetiansblinds.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/muestras.venetiansblinds.com\/index.php\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":5,"href":"https:\/\/muestras.venetiansblinds.com\/index.php\/wp-json\/wp\/v2\/pages\/154\/revisions"}],"predecessor-version":[{"id":160,"href":"https:\/\/muestras.venetiansblinds.com\/index.php\/wp-json\/wp\/v2\/pages\/154\/revisions\/160"}],"wp:attachment":[{"href":"https:\/\/muestras.venetiansblinds.com\/index.php\/wp-json\/wp\/v2\/media?parent=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}