Encontr\u00e1 tu habitaci\u00f3n \u00b7 Hotel Japon\u00e8s Puigpin\u00f3s<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Jost:wght@400;500;600&family=Nunito+Sans:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ============================================================\n HOTEL JAPON\u00c8S PUIGPIN\u00d3S \u2014 SELECTOR DE HABITACI\u00d3N\n ============================================================ *\/\n<\/style>\n<\/head>\n<body>\n\n\n<script>\n\n\/\/ ------------------------------------------------------------\n\/\/ 1. ENLACE DE RESERVAS\n\/\/ Se usa para el bot\u00f3n final \"Ver disponibilidad\". Es el mismo\n\/\/ enlace para las 3 habitaciones, sin par\u00e1metros.\n\/\/ ------------------------------------------------------------\nconst BOOKING_URL = \"https:\/\/hoteljaponespuigpinos.com\/reserves-2\/\";\n\n\n\/\/ ------------------------------------------------------------\n\/\/ 2. PREGUNTAS Y OPCIONES\n\/\/ Cada pregunta tiene un \"id\" (no lo toques, lo usa la tabla de\n\/\/ puntajes de m\u00e1s abajo para saber a qu\u00e9 pregunta pertenece cada\n\/\/ opci\u00f3n) y una lista de opciones. Cada opci\u00f3n tiene:\n\/\/ - id: identificador interno (no lo toques)\n\/\/ - label: el texto del bot\u00f3n\/pastilla que ve el usuario\n\/\/ - reason: frase corta usada en el resultado final para\n\/\/ explicar \"por qu\u00e9 se recomienda\" (ej: \"es una escapada en\n\/\/ pareja\"). Se combina as\u00ed: \"La recomendamos porque \" + reason\n\/\/ ------------------------------------------------------------\nconst QUESTIONS = [\n {\n id: \"con_quien\",\n question: \"\u00bfCon qui\u00e9n ven\u00eds?\",\n options: [\n { id: \"pareja\", label: \"Pareja\", reason: \"es una escapada en pareja\" },\n { id: \"familia\", label: \"Familia\", reason: \"ven\u00eds en familia\" },\n { id: \"amigos\", label: \"Amigos\", reason: \"ven\u00eds con amigos\" },\n { id: \"solo\", label: \"Solo\/a\", reason: \"busc\u00e1s un momento a solas\" },\n { id: \"mascota\", label: \"Con mascota\", reason: \"ven\u00eds acompa\u00f1ados de vuestra mascota\" }\n ]\n },\n {\n id: \"escapada_para\",\n question: \"Esta escapada es para...\",\n options: [\n { id: \"desconectar\", label: \"Desconectar\", reason: \"busc\u00e1is desconectar del todo\" },\n { id: \"sorprender\", label: \"Sorprender a alguien\", reason: \"quer\u00e9is sorprender a alguien especial\" },\n { id: \"explorar\", label: \"Explorar la zona\", reason: \"os apetece explorar el Solson\u00e8s\" }\n ]\n },\n {\n id: \"como_dormis\",\n question: \"\u00bfC\u00f3mo dorm\u00eds?\",\n options: [\n { id: \"tatami\", label: \"Tatami y fut\u00f3n\", reason: \"os gusta dormir sobre tatami y fut\u00f3n, al estilo japon\u00e9s m\u00e1s aut\u00e9ntico\" },\n { id: \"colchon_bajo\", label: \"Colch\u00f3n bajo\", reason: \"prefer\u00eds un colch\u00f3n bajo, a ras de tarima\" },\n { id: \"cama_alta\", label: \"Cama alta\", reason: \"prefer\u00eds una cama alta\" }\n ]\n },\n {\n id: \"banera_ducha\",\n question: \"\u00bfBa\u00f1era o ducha?\",\n options: [\n { id: \"banera\", label: \"Ba\u00f1era\", reason: \"os apetece relajaros en una ba\u00f1era\" },\n { id: \"ducha\", label: \"Ducha\", reason: \"prefer\u00eds una ducha \u00e1gil tipo rainshower\" }\n ]\n },\n {\n id: \"manana\",\n question: \"Por la ma\u00f1ana prefer\u00eds...\",\n options: [\n { id: \"sol\", label: \"Luz de sol\", reason: \"os gusta despertar con la luz del sol entrando en la habitaci\u00f3n\" },\n { id: \"oscuridad\", label: \"Oscuridad total\", reason: \"prefer\u00eds que la ma\u00f1ana entre despacio, en penumbra\" }\n ]\n },\n {\n id: \"vista\",\n question: \"La vista, \u00bfbosque o piscina?\",\n options: [\n { id: \"bosque\", label: \"Bosque\", reason: \"busc\u00e1is la vista al bosque que envuelve la masia\" },\n { id: \"piscina\", label: \"Piscina\", reason: \"quer\u00e9is la piscina en primer plano\" }\n ]\n }\n];\n\n\n\/\/ ------------------------------------------------------------\n\/\/ 3. HABITACIONES\n\/\/ Datos completos de las 8 habitaciones, tal como figuran en la\n\/\/ web del hotel (texto original en catal\u00e1n, adaptado aqu\u00ed al\n\/\/ castellano para que combine con el resto del test). Si el\n\/\/ hotel tiene una versi\u00f3n oficial en castellano de estos textos,\n\/\/ se puede pegar directamente en \"meaning\" y \"line\".\n\/\/\n\/\/ - id: identificador interno (debe coincidir con el usado en\n\/\/ la tabla de puntajes, punto 4)\n\/\/ - name: nombre de la habitaci\u00f3n\n\/\/ - meaning: qu\u00e9 significa el nombre\n\/\/ - line: frase evocadora, tomada de la descripci\u00f3n real, que\n\/\/ se muestra en el resultado final\n\/\/ - image: foto de portada de la habitaci\u00f3n. Est\u00e1n tomadas\n\/\/ directamente de la web del hotel (mismo dominio), as\u00ed que\n\/\/ el archivo sigue siendo liviano. Si quer\u00e9s cambiar alguna,\n\/\/ solo hace falta reemplazar la URL por otra imagen del hotel\n\/\/ (o subir la tuya a alg\u00fan sitio y pegar el link ac\u00e1).\n\/\/ - description: descripci\u00f3n completa (por si quer\u00e9s usarla en\n\/\/ otra parte de la web o ampliar el resultado m\u00e1s adelante)\n\/\/ - characteristics: lista de caracter\u00edsticas tal como figuran\n\/\/ en la ficha real de la habitaci\u00f3n\n\/\/ ------------------------------------------------------------\nconst ROOMS = [\n {\n id: \"HARU\",\n name: \"Haru\",\n meaning: \"Significa primavera, la estaci\u00f3n m\u00e1s esperada del a\u00f1o.\",\n line: \"Vistas al imponente bosque que envuelve la mas\u00eda, con los colores cambiantes de cada estaci\u00f3n.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/haru2-scaled.jpg\",\n description: \"Aquesta habitaci\u00f3 t\u00e9 unes espectaculars vistes a l'imponent bosc que envolta la masia i des de l'habitaci\u00f3 es poden contemplar els canviants colors de les estacions.\",\n characteristics: [\n \"Dos colchones de 90x190cm, en formato matrimonio o individual, sobre tarima de madera a poca altura del suelo\",\n \"Ba\u00f1o con ba\u00f1era y ducha rainshower\",\n \"TV, aire acondicionado y calefacci\u00f3n\",\n \"Ventana y balc\u00f3n orientados al sur, con vistas al Serrat de Sant Miquel\",\n \"Conserva una antigua 'teiera', el rinc\u00f3n donde antes se encend\u00eda el fuego para iluminar la estancia\"\n ]\n },\n {\n id: \"NATSU\",\n name: \"Natsu\",\n meaning: \"Significa verano.\",\n line: \"Un balc\u00f3n orientado al suroeste que invita a salir a ver la puesta de sol tras la colina, y una abertura sobre la cama para observar las estrellas.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/natsu3-scaled.jpg\",\n description: \"Habitaci\u00f3 amb balc\u00f3, orientada a sud oest, on a l'estiu et convida a sortir i observar la posta de sol, just darrera el tur\u00f3 que queda a davant de la nostra vista.\",\n characteristics: [\n \"Dos colchones de 90x190cm, en formato matrimonio o individual, sobre tarima de madera a poca altura del suelo\",\n \"Ba\u00f1o con ba\u00f1era y ducha rainshower\",\n \"Gran terraza con mesa y sillas de exterior\",\n \"Abertura especial sobre el balc\u00f3n para observar las estrellas desde la cama\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n },\n {\n id: \"AKI\",\n name: \"Aki\",\n meaning: \"Significa oto\u00f1o.\",\n line: \"Las ventanas miran al robledal de Timoneda, un espect\u00e1culo de amarillos y marrones c\u00e1lidos, especialmente al atardecer.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/aki2-scaled.jpg\",\n description: \"Les finestres de l'habitaci\u00f3 tenen les millors vistes a la roureda de Timoneda, un espectacle de colors especialment a la tardor.\",\n characteristics: [\n \"Dos colchones de 90x190cm sobre tarima de madera, con cojines de estilo nip\u00f3n para sentarse a ras de suelo\",\n \"Ba\u00f1o con ducha rainshower\",\n \"Dos ventanas orientadas al robledal, por donde entra la luz del atardecer\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n },\n {\n id: \"MIZU\",\n name: \"Mizu\",\n meaning: \"Significa agua, uno de los cuatro elementos naturales.\",\n line: \"Desde sus ventanas se ve en primera l\u00ednea la piscina, con el bosque de pinos y robles como tel\u00f3n de fondo.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/mizu2-scaled.jpg\",\n description: \"Des de les finestres d'aquesta habitaci\u00f3 es pot observar a primera l\u00ednia la piscina i on allarga la vista l'espectacular bosc de pins i roures que envolta la masia.\",\n characteristics: [\n \"Dos colchones de 90x190cm sobre tarima de madera, con posibilidad de a\u00f1adir futones extra\",\n \"Ba\u00f1o con ducha rainshower\",\n \"Tres ventanas orientadas al este, para ver salir el sol, y una gran ventana al norte\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n },\n {\n id: \"FUYU\",\n name: \"Fuyu\",\n meaning: \"Significa invierno.\",\n line: \"El antiguo espacio del fuego y el horno de la mas\u00eda, donde antes se pasaban las largas noches de invierno.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/Fuyu2-scaled.jpg\",\n description: \"A Jap\u00f3 tenen molta import\u00e0ncia les estacions i aquesta habitaci\u00f3 havia estat l'espai del foc i del forn de la masia.\",\n characteristics: [\n \"Habitaci\u00f3n adaptada, con cama de matrimonio o dos individuales elevadas (no a ras de suelo)\",\n \"Ba\u00f1o con ducha rainshower\",\n \"Dos ventanas con vistas al bosque, orientadas a sur y oeste\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n },\n {\n id: \"TSUKI\",\n name: \"Tsuki\",\n meaning: \"Significa luna.\",\n line: \"En las antiguas buhardillas de la mas\u00eda, una ventana abovedada invita a observar la luna que vela la noche.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/tsuki3-scaled.jpg\",\n description: \"L'habitaci\u00f3 est\u00e0 orientada amb vistes a sud est, a les antigues golfes de la masia, amb una finestra de volta que convida a observar la lluna.\",\n characteristics: [\n \"Habitaci\u00f3n tradicional japonesa, con suelo de tatami y fut\u00f3n, en formato matrimonio o individual\",\n \"Ba\u00f1o con ba\u00f1era y ducha rainshower\",\n \"Orientada al sureste, perfecta para ver salir el sol\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n },\n {\n id: \"KAZE\",\n name: \"Kaze\",\n meaning: \"Significa viento, s\u00edmbolo de movimiento y de creaci\u00f3n.\",\n line: \"En las antiguas buhardillas donde se guardaba el grano de la cosecha para que se secara.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/kaze2-scaled.jpg\",\n description: \"Dona nom a aquesta habitaci\u00f3 ubicada a les antigues golfes de la masia, on s'hi guardava el cereal de la collita perqu\u00e8 s'assequ\u00e9s.\",\n characteristics: [\n \"Habitaci\u00f3n tradicional japonesa, con suelo de tatami y fut\u00f3n, en formato matrimonio o individual\",\n \"Posibilidad de configuraci\u00f3n triple\",\n \"Ba\u00f1o con ba\u00f1era y ducha rainshower\",\n \"Orientada al este, recibe los primeros rayos de sol\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n },\n {\n id: \"ISHI\",\n name: \"Ishi\",\n meaning: \"Significa piedra.\",\n line: \"La piedra que envuelve toda la mas\u00eda, s\u00edmbolo de unidad y fuerza, base de la casa catalana.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/ishi2-scaled.jpg\",\n description: \"Element de gran import\u00e0ncia pel poble japon\u00e8s i la base de la masia catalana. S\u00edmbol de la unitat i la for\u00e7a.\",\n characteristics: [\n \"Habitaci\u00f3n tradicional japonesa, con suelo de tatami y fut\u00f3n, en formato matrimonio o individual\",\n \"Ba\u00f1o con ba\u00f1era y ducha rainshower\",\n \"Orientada al norte, con vistas a la iglesia de Timoneda\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n }\n];\n\n\n\/\/ ------------------------------------------------------------\n\/\/ 4. TABLA DE PUNTAJES\n\/\/ Ac\u00e1 se define cu\u00e1ntos puntos suma cada habitaci\u00f3n cuando el\n\/\/ usuario elige una opci\u00f3n determinada. Escala usada: 0 (no\n\/\/ tiene nada que ver) a 3 (encaja perfecto). El \"% de afinidad\"\n\/\/ que se muestra en el resultado se calcula sobre esta misma\n\/\/ escala (puntaje obtenido \/ puntaje m\u00e1ximo posible), as\u00ed que si\n\/\/ cambi\u00e1s el rango de puntos, hacelo de forma pareja en toda la\n\/\/ tabla para que el porcentaje siga teniendo sentido.\n\/\/\n\/\/ Est\u00e1 organizada as\u00ed: SCORES[id de la pregunta][id de la opci\u00f3n]\n\/\/ = { HARU: n, NATSU: n, AKI: n, MIZU: n, FUYU: n, TSUKI: n,\n\/\/ KAZE: n, ISHI: n }\n\/\/\n\/\/ Los puntajes de \"como_dormis\" y \"banera_ducha\" est\u00e1n basados en\n\/\/ las caracter\u00edsticas reales y exactas de cada habitaci\u00f3n.\n\/\/ Los de \"con_quien\" (especialmente \"mascota\") son una propuesta\n\/\/ editorial razonable, ya que la web del hotel no especifica\n\/\/ pol\u00edtica de mascotas por habitaci\u00f3n \u2014 conviene confirmarlo con\n\/\/ el hotel y ajustar si hace falta.\n\/\/ ------------------------------------------------------------\nconst SCORES = {\n\n con_quien: {\n pareja: { HARU:2, NATSU:3, AKI:1, MIZU:1, FUYU:1, TSUKI:3, KAZE:1, ISHI:2 },\n familia: { HARU:1, NATSU:1, AKI:1, MIZU:3, FUYU:3, TSUKI:1, KAZE:2, ISHI:1 },\n amigos: { HARU:1, NATSU:1, AKI:2, MIZU:2, FUYU:1, TSUKI:1, KAZE:3, ISHI:1 },\n solo: { HARU:2, NATSU:1, AKI:2, MIZU:1, FUYU:1, TSUKI:3, KAZE:1, ISHI:3 },\n mascota: { HARU:2, NATSU:2, AKI:2, MIZU:2, FUYU:2, TSUKI:1, KAZE:1, ISHI:2 }\n },\n\n escapada_para: {\n desconectar: { HARU:2, NATSU:1, AKI:2, MIZU:1, FUYU:2, TSUKI:3, KAZE:2, ISHI:3 },\n sorprender: { HARU:2, NATSU:3, AKI:1, MIZU:1, FUYU:1, TSUKI:3, KAZE:1, ISHI:2 },\n explorar: { HARU:2, NATSU:2, AKI:3, MIZU:3, FUYU:2, TSUKI:1, KAZE:1, ISHI:1 }\n },\n\n como_dormis: {\n tatami: { HARU:0, NATSU:0, AKI:0, MIZU:0, FUYU:0, TSUKI:3, KAZE:3, ISHI:3 },\n colchon_bajo: { HARU:3, NATSU:3, AKI:3, MIZU:3, FUYU:0, TSUKI:0, KAZE:0, ISHI:0 },\n cama_alta: { HARU:0, NATSU:0, AKI:0, MIZU:0, FUYU:3, TSUKI:0, KAZE:0, ISHI:0 }\n },\n\n banera_ducha: {\n banera: { HARU:3, NATSU:3, AKI:0, MIZU:0, FUYU:0, TSUKI:3, KAZE:3, ISHI:3 },\n ducha: { HARU:1, NATSU:1, AKI:3, MIZU:3, FUYU:3, TSUKI:1, KAZE:1, ISHI:1 }\n },\n\n manana: {\n sol: { HARU:1, NATSU:0, AKI:0, MIZU:3, FUYU:0, TSUKI:3, KAZE:3, ISHI:0 },\n oscuridad: { HARU:1, NATSU:2, AKI:2, MIZU:0, FUYU:2, TSUKI:0, KAZE:0, ISHI:3 }\n },\n\n vista: {\n bosque: { HARU:3, NATSU:3, AKI:3, MIZU:1, FUYU:3, TSUKI:0, KAZE:0, ISHI:0 },\n piscina: { HARU:0, NATSU:0, AKI:0, MIZU:3, FUYU:0, TSUKI:0, KAZE:0, ISHI:0 }\n }\n\n};\n\n<\/script>\n\n\n\n<div id=\"app\"><\/div>\n\n<style>\n :root{\n --bg: #E3DFDA;\n --accent: #CB6754;\n --text: #424242;\n --white: #FFFFFF;\n }\n\n *{ box-sizing: border-box; }\n\n #app{\n background: var(--bg);\n color: var(--text);\n font-family: 'Nunito Sans', sans-serif;\n min-height: 100vh;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 24px 16px 56px;\n }\n\n .puig-h1{\n font-family: 'Jost', sans-serif;\n color: var(--accent);\n font-weight: 500;\n letter-spacing: 0.01em;\n }\n\n .puig-wrap{\n width: 100%;\n max-width: 560px;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .puig-kanji{\n font-family: 'Jost', sans-serif;\n color: var(--accent);\n font-size: 12px;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n opacity: 0.7;\n margin-bottom: 6px;\n }\n\n .puig-intro-sub{\n font-size: 14.5px;\n line-height: 1.55;\n margin: 0;\n opacity: 0.85;\n }\n\n \/* ============================================================\n PANTALLA \u00daNICA CON LAS 6 PREGUNTAS\n ============================================================ *\/\n\n .puig-card{\n width: 100%;\n background: var(--white);\n border-radius: 22px;\n padding: 26px 22px 24px;\n animation: puig-fade 0.35s ease;\n }\n @keyframes puig-fade{\n from{ opacity: 0; transform: translateY(6px); }\n to{ opacity: 1; transform: translateY(0); }\n }\n\n .puig-header{\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n padding-bottom: 20px;\n border-bottom: 1px solid rgba(66,66,66,0.12);\n margin-bottom: 22px;\n }\n .puig-header-left{ flex: 1 1 240px; }\n .puig-header-left .puig-h1{\n font-size: 21px;\n margin: 0 0 6px;\n line-height: 1.25;\n }\n\n .puig-header-right{\n flex: 0 0 110px;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 6px;\n padding-top: 4px;\n }\n .puig-progress-track{\n width: 100px;\n height: 4px;\n background: rgba(66,66,66,0.12);\n border-radius: 4px;\n overflow: hidden;\n }\n .puig-progress-fill{\n height: 100%;\n background: var(--accent);\n border-radius: 4px;\n transition: width 0.35s ease;\n width: 0%;\n }\n .puig-progress-pct{\n font-family: 'Jost', sans-serif;\n font-size: 13px;\n font-weight: 600;\n color: var(--accent);\n }\n\n .puig-questions{\n display: flex;\n flex-direction: column;\n }\n\n .puig-q-block{\n padding: 18px 0;\n border-bottom: 1px solid rgba(66,66,66,0.1);\n }\n .puig-q-block:first-child{ padding-top: 0; }\n .puig-q-block:last-child{ border-bottom: none; padding-bottom: 6px; }\n\n .puig-q-label{\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 14px;\n }\n .puig-q-number{\n flex: none;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--accent);\n color: var(--white);\n font-family: 'Jost', sans-serif;\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .puig-q-text{\n font-family: 'Jost', sans-serif;\n color: var(--accent);\n font-weight: 500;\n font-size: 17px;\n }\n .puig-q-check{\n margin-left: auto;\n color: var(--accent);\n font-size: 15px;\n opacity: 0;\n transition: opacity 0.2s ease;\n }\n .puig-q-block.is-answered .puig-q-check{ opacity: 1; }\n\n .puig-options{\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n }\n\n .puig-pill{\n font-family: 'Nunito Sans', sans-serif;\n font-weight: 700;\n font-size: 14.5px;\n color: var(--accent);\n background: var(--white);\n border: 1.5px solid var(--accent);\n border-radius: 999px;\n padding: 11px 20px;\n text-align: center;\n cursor: pointer;\n transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;\n -webkit-tap-highlight-color: transparent;\n }\n \/* El hover solo se aplica en dispositivos que realmente tienen\n puntero (mouse). En touch, :hover puede quedar \"pegado\" en el\n bot\u00f3n que cae debajo del dedo al re-renderizar, simulando una\n selecci\u00f3n que no es real. *\/\n @media (hover: hover) and (pointer: fine){\n .puig-pill:hover{\n background: var(--accent);\n color: var(--white);\n }\n }\n .puig-pill:active{\n transform: scale(0.97);\n }\n .puig-pill.is-selected{\n background: var(--accent);\n color: var(--white);\n }\n\n .puig-submit{\n width: 100%;\n margin-top: 22px;\n font-family: 'Nunito Sans', sans-serif;\n font-weight: 700;\n font-size: 16px;\n color: var(--white);\n background: var(--accent);\n border: none;\n border-radius: 999px;\n padding: 16px 26px;\n cursor: pointer;\n transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease, color 0.2s ease;\n }\n @media (hover: hover) and (pointer: fine){\n .puig-submit:not(:disabled):hover{ opacity: 0.88; }\n }\n .puig-submit:not(:disabled):active{ transform: scale(0.99); }\n .puig-submit:disabled{\n background: rgba(66,66,66,0.14);\n color: rgba(66,66,66,0.4);\n cursor: not-allowed;\n }\n\n .puig-submit-hint{\n text-align: center;\n font-size: 13px;\n color: var(--text);\n opacity: 0.55;\n margin: 12px 0 0;\n }\n\n \/* ============================================================\n RESULTADOS\n ============================================================ *\/\n\n .puig-results-intro{\n text-align: center;\n margin-bottom: 28px;\n }\n .puig-results-intro .puig-h1{\n font-size: 28px;\n text-align: center;\n margin: 6px 0 12px;\n }\n .puig-results-intro .puig-intro-sub{\n text-align: center;\n }\n\n .puig-results-list{\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 20px;\n margin-bottom: 32px;\n }\n\n .puig-room-card{\n background: var(--white);\n border-radius: 18px;\n overflow: hidden;\n text-align: left;\n }\n\n .puig-room-photo{\n position: relative;\n width: 100%;\n aspect-ratio: 4 \/ 3;\n background: rgba(66,66,66,0.08);\n }\n .puig-room-photo img{\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n .puig-match-badge{\n position: absolute;\n top: 12px;\n right: 12px;\n background: rgba(255,255,255,0.94);\n color: var(--accent);\n font-family: 'Nunito Sans', sans-serif;\n font-weight: 700;\n font-size: 12px;\n padding: 6px 12px;\n border-radius: 999px;\n letter-spacing: 0.01em;\n }\n\n .puig-room-body{\n padding: 22px 22px 24px;\n }\n .puig-room-name{\n font-family: 'Jost', sans-serif;\n color: var(--accent);\n font-size: 22px;\n font-weight: 600;\n margin: 0 0 2px;\n }\n .puig-room-meaning{\n font-size: 13px;\n font-style: italic;\n opacity: 0.65;\n margin: 0 0 14px;\n }\n .puig-room-line{\n font-size: 15px;\n line-height: 1.55;\n margin: 0 0 14px;\n }\n .puig-room-reason{\n font-size: 14px;\n line-height: 1.5;\n color: var(--accent);\n margin: 0;\n padding-top: 14px;\n border-top: 1px solid rgba(203,103,84,0.2);\n }\n\n .puig-cta{\n display: inline-block;\n font-family: 'Nunito Sans', sans-serif;\n font-weight: 700;\n font-size: 16px;\n color: var(--white);\n background: var(--accent);\n text-decoration: none;\n border-radius: 999px;\n padding: 17px 46px;\n text-align: center;\n transition: opacity 0.2s ease, transform 0.15s ease;\n }\n @media (hover: hover) and (pointer: fine){\n .puig-cta:hover{ opacity: 0.88; }\n }\n .puig-cta:active{ transform: scale(0.98); }\n\n .puig-restart{\n background: none;\n border: none;\n color: var(--text);\n opacity: 0.55;\n font-family: 'Nunito Sans', sans-serif;\n font-size: 13px;\n cursor: pointer;\n margin-top: 22px;\n text-decoration: underline;\n -webkit-tap-highlight-color: transparent;\n }\n\n @media (min-width: 560px){\n .puig-card{ padding: 34px 34px 30px; }\n .puig-header-left .puig-h1{ font-size: 24px; }\n }\n<\/style>\n\n\n<script>\n(function(){\n\n const app = document.getElementById('app');\n const answers = {}; \/\/ { questionId: optionId }\n let view = 'form'; \/\/ 'form' | 'results'\n\n function init(){\n if (view === 'form') renderForm();\n else renderResults();\n }\n\n function renderForm(){\n app.innerHTML = '';\n const wrap = document.createElement('div');\n wrap.className = 'puig-wrap';\n\n wrap.innerHTML = `\n <div class=\"puig-card\">\n <div class=\"puig-header\">\n <div class=\"puig-header-left\">\n <div class=\"puig-kanji\">\u5bbf\u6cca<\/div>\n <h1 class=\"puig-h1\">Encontr\u00e1 tu habitaci\u00f3n<\/h1>\n <p class=\"puig-intro-sub\">Respond\u00e9 estas preguntas y te recomendamos las 3 habitaciones que mejor encajan.<\/p>\n <\/div>\n <div class=\"puig-header-right\">\n <div class=\"puig-progress-track\"><div class=\"puig-progress-fill\" id=\"progressFill\"><\/div><\/div>\n <div class=\"puig-progress-pct\" id=\"progressPct\">0%<\/div>\n <\/div>\n <\/div>\n <div class=\"puig-questions\" id=\"questionsWrap\"><\/div>\n <button class=\"puig-submit\" id=\"submitBtn\" type=\"button\" disabled>Ver mi resultado<\/button>\n <p class=\"puig-submit-hint\" id=\"submitHint\"><\/p>\n <\/div>\n `;\n\n const questionsWrap = wrap.querySelector('#questionsWrap');\n\n QUESTIONS.forEach((q, qIndex) => {\n const block = document.createElement('div');\n block.className = 'puig-q-block';\n block.dataset.qid = q.id;\n block.innerHTML = `\n <div class=\"puig-q-label\">\n <span class=\"puig-q-number\">${qIndex + 1}<\/span>\n <span class=\"puig-q-text\">${q.question}<\/span>\n <span class=\"puig-q-check\">✓<\/span>\n <\/div>\n <div class=\"puig-options\"><\/div>\n `;\n\n const optionsContainer = block.querySelector('.puig-options');\n q.options.forEach(opt => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'puig-pill';\n btn.textContent = opt.label;\n btn.addEventListener('click', () => {\n answers[q.id] = opt.id;\n optionsContainer.querySelectorAll('.puig-pill').forEach(p => p.classList.remove('is-selected'));\n btn.classList.add('is-selected');\n block.classList.add('is-answered');\n updateProgress();\n });\n optionsContainer.appendChild(btn);\n });\n\n questionsWrap.appendChild(block);\n });\n\n wrap.querySelector('#submitBtn').addEventListener('click', () => {\n if (Object.keys(answers).length < QUESTIONS.length) return;\n view = 'results';\n init();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n });\n\n app.appendChild(wrap);\n updateProgress();\n }\n\n function updateProgress(){\n const answeredCount = Object.keys(answers).length;\n const total = QUESTIONS.length;\n const pct = Math.round((answeredCount \/ total) * 100);\n\n const fill = document.getElementById('progressFill');\n const pctLabel = document.getElementById('progressPct');\n const submitBtn = document.getElementById('submitBtn');\n const hint = document.getElementById('submitHint');\n\n if (fill) fill.style.width = pct + '%';\n if (pctLabel) pctLabel.textContent = pct + '%';\n if (submitBtn) submitBtn.disabled = answeredCount < total;\n if (hint){\n const remaining = total - answeredCount;\n hint.textContent = remaining > 0\n ? `Faltan ${remaining} pregunta${remaining === 1 ? '' : 's'} por responder`\n : '\u00a1Listo! Mir\u00e1 tu resultado';\n }\n }\n\n \/\/ Calcula el puntaje total de cada habitaci\u00f3n seg\u00fan las\n \/\/ respuestas dadas, y devuelve adem\u00e1s las 2 razones de mayor\n \/\/ peso por habitaci\u00f3n (para el texto \"por qu\u00e9 se recomienda\").\n function computeResults(){\n const totals = {};\n const reasonsByRoom = {};\n ROOMS.forEach(r => { totals[r.id] = 0; reasonsByRoom[r.id] = []; });\n\n QUESTIONS.forEach(q => {\n const chosenOptionId = answers[q.id];\n if (!chosenOptionId) return;\n const option = q.options.find(o => o.id === chosenOptionId);\n const roomScores = (SCORES[q.id] && SCORES[q.id][chosenOptionId]) || {};\n\n ROOMS.forEach(r => {\n const pts = roomScores[r.id] || 0;\n totals[r.id] += pts;\n reasonsByRoom[r.id].push({ reason: option.reason, pts });\n });\n });\n\n let ranked = ROOMS.map(r => ({\n room: r,\n score: totals[r.id],\n reasons: reasonsByRoom[r.id]\n .sort((a, b) => b.pts - a.pts)\n .filter(r2 => r2.pts > 0)\n .slice(0, 2)\n .map(r2 => r2.reason)\n }));\n\n \/\/ Mezcla aleatoria previa para que los empates no favorezcan\n \/\/ siempre al mismo orden de la lista ROOMS.\n ranked = shuffle(ranked);\n ranked.sort((a, b) => b.score - a.score);\n\n return ranked.slice(0, 3);\n }\n\n function shuffle(arr){\n const a = arr.slice();\n for (let i = a.length - 1; i > 0; i--){\n const j = Math.floor(Math.random() * (i + 1));\n [a[i], a[j]] = [a[j], a[i]];\n }\n return a;\n }\n\n \/\/ Porcentaje de afinidad mostrado en cada card de resultado,\n \/\/ sobre el puntaje m\u00e1ximo posible (todas las opciones punt\u00faan\n \/\/ en la escala 0-3, as\u00ed que el m\u00e1ximo es 3 x cantidad de\n \/\/ preguntas).\n function matchPercent(score){\n const max = QUESTIONS.length * 3;\n return Math.max(0, Math.min(100, Math.round((score \/ max) * 100)));\n }\n\n function renderResults(){\n app.innerHTML = '';\n const top3 = computeResults();\n\n const wrap = document.createElement('div');\n wrap.className = 'puig-wrap';\n\n wrap.innerHTML = `\n <div class=\"puig-results-intro\">\n <div class=\"puig-kanji\">\u7d50\u679c<\/div>\n <h1 class=\"puig-h1\">Vuestras habitaciones<\/h1>\n <p class=\"puig-intro-sub\">Seg\u00fan lo que nos contasteis, estas tres son las que mejor encajan.<\/p>\n <\/div>\n <div class=\"puig-results-list\"><\/div>\n <a class=\"puig-cta\" href=\"${BOOKING_URL}\" target=\"_blank\" rel=\"noopener\">Ver disponibilidad<\/a>\n <button class=\"puig-restart\" type=\"button\">Volver a empezar<\/button>\n `;\n\n const list = wrap.querySelector('.puig-results-list');\n top3.forEach(entry => {\n const r = entry.room;\n const pct = matchPercent(entry.score);\n const card = document.createElement('div');\n card.className = 'puig-room-card';\n\n const reasonText = entry.reasons.length\n ? 'La recomendamos porque ' + entry.reasons.join(' y ') + '.'\n : 'Una de las habitaciones que mejor combina con lo que busc\u00e1is.';\n\n card.innerHTML = `\n <div class=\"puig-room-photo\">\n <img decoding=\"async\" src=\"${r.image}\" alt=\"Habitaci\u00f3n ${r.name}\" loading=\"lazy\">\n <span class=\"puig-match-badge\">${pct}% afinidad<\/span>\n <\/div>\n <div class=\"puig-room-body\">\n <p class=\"puig-room-name\">${r.name}<\/p>\n <p class=\"puig-room-meaning\">${r.meaning}<\/p>\n <p class=\"puig-room-line\">${r.line}<\/p>\n <p class=\"puig-room-reason\">${reasonText}<\/p>\n <\/div>\n `;\n list.appendChild(card);\n });\n\n wrap.querySelector('.puig-restart').addEventListener('click', () => {\n Object.keys(answers).forEach(k => delete answers[k]);\n view = 'form';\n init();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n });\n\n app.appendChild(wrap);\n }\n\n init();\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\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>Encontr\u00e1 tu habitaci\u00f3n \u00b7 Hotel Japon\u00e8s Puigpin\u00f3s<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-5088","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Prueba - Brand 360<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/brand360studio.com\/ca\/prueba\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prueba - Brand 360\" \/>\n<meta property=\"og:description\" content=\"Encontr\u00e1 tu habitaci\u00f3n \u00b7 Hotel Japon\u00e8s Puigpin\u00f3s\" \/>\n<meta property=\"og:url\" content=\"https:\/\/brand360studio.com\/ca\/prueba\/\" \/>\n<meta property=\"og:site_name\" content=\"Brand 360\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-01T01:51:56+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"15 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/brand360studio.com\\\/prueba\\\/\",\"url\":\"https:\\\/\\\/brand360studio.com\\\/prueba\\\/\",\"name\":\"Prueba - Brand 360\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/brand360studio.com\\\/#website\"},\"datePublished\":\"2026-09-01T01:19:26+00:00\",\"dateModified\":\"2026-09-01T01:51:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/brand360studio.com\\\/prueba\\\/#breadcrumb\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/brand360studio.com\\\/prueba\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/brand360studio.com\\\/prueba\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/brand360studio.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Prueba\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/brand360studio.com\\\/#website\",\"url\":\"https:\\\/\\\/brand360studio.com\\\/\",\"name\":\"Brand 360\",\"description\":\"Agencia de marketing tur\u00edstico\",\"publisher\":{\"@id\":\"https:\\\/\\\/brand360studio.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/brand360studio.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/brand360studio.com\\\/#organization\",\"name\":\"Brand 360\",\"url\":\"https:\\\/\\\/brand360studio.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\\\/\\\/brand360studio.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/brand360studio.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Logo-nuevo-Brand-360.png\",\"contentUrl\":\"https:\\\/\\\/brand360studio.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Logo-nuevo-Brand-360.png\",\"width\":1080,\"height\":1080,\"caption\":\"Brand 360\"},\"image\":{\"@id\":\"https:\\\/\\\/brand360studio.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Prueba - Brand 360","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/brand360studio.com\/ca\/prueba\/","og_locale":"ca_ES","og_type":"article","og_title":"Prueba - Brand 360","og_description":"Encontr\u00e1 tu habitaci\u00f3n \u00b7 Hotel Japon\u00e8s Puigpin\u00f3s","og_url":"https:\/\/brand360studio.com\/ca\/prueba\/","og_site_name":"Brand 360","article_modified_time":"2026-09-01T01:51:56+00:00","twitter_card":"summary_large_image","twitter_misc":{"Temps estimat de lectura":"15 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/brand360studio.com\/prueba\/","url":"https:\/\/brand360studio.com\/prueba\/","name":"Prueba - Brand 360","isPartOf":{"@id":"https:\/\/brand360studio.com\/#website"},"datePublished":"2026-09-01T01:19:26+00:00","dateModified":"2026-09-01T01:51:56+00:00","breadcrumb":{"@id":"https:\/\/brand360studio.com\/prueba\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brand360studio.com\/prueba\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/brand360studio.com\/prueba\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/brand360studio.com\/"},{"@type":"ListItem","position":2,"name":"Prueba"}]},{"@type":"WebSite","@id":"https:\/\/brand360studio.com\/#website","url":"https:\/\/brand360studio.com\/","name":"Brand 360","description":"Agencia de marketing tur\u00edstico","publisher":{"@id":"https:\/\/brand360studio.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brand360studio.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Organization","@id":"https:\/\/brand360studio.com\/#organization","name":"Brand 360","url":"https:\/\/brand360studio.com\/","logo":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/brand360studio.com\/#\/schema\/logo\/image\/","url":"https:\/\/brand360studio.com\/wp-content\/uploads\/2024\/04\/Logo-nuevo-Brand-360.png","contentUrl":"https:\/\/brand360studio.com\/wp-content\/uploads\/2024\/04\/Logo-nuevo-Brand-360.png","width":1080,"height":1080,"caption":"Brand 360"},"image":{"@id":"https:\/\/brand360studio.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/pages\/5088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/comments?post=5088"}],"version-history":[{"count":7,"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/pages\/5088\/revisions"}],"predecessor-version":[{"id":5096,"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/pages\/5088\/revisions\/5096"}],"wp:attachment":[{"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/media?parent=5088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nEncontr\u00e1 tu habitaci\u00f3n \u00b7 Hotel Japon\u00e8s Puigpin\u00f3s<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Jost:wght@400;500;600&family=Nunito+Sans:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ============================================================\n HOTEL JAPON\u00c8S PUIGPIN\u00d3S \u2014 SELECTOR DE HABITACI\u00d3N\n ============================================================ *\/\n<\/style>\n<\/head>\n<body>\n\n\n<script>\n\n\/\/ ------------------------------------------------------------\n\/\/ 1. ENLACE DE RESERVAS\n\/\/ Se usa para el bot\u00f3n final \"Ver disponibilidad\". Es el mismo\n\/\/ enlace para las 3 habitaciones, sin par\u00e1metros.\n\/\/ ------------------------------------------------------------\nconst BOOKING_URL = \"https:\/\/hoteljaponespuigpinos.com\/reserves-2\/\";\n\n\n\/\/ ------------------------------------------------------------\n\/\/ 2. PREGUNTAS Y OPCIONES\n\/\/ Cada pregunta tiene un \"id\" (no lo toques, lo usa la tabla de\n\/\/ puntajes de m\u00e1s abajo para saber a qu\u00e9 pregunta pertenece cada\n\/\/ opci\u00f3n) y una lista de opciones. Cada opci\u00f3n tiene:\n\/\/ - id: identificador interno (no lo toques)\n\/\/ - label: el texto del bot\u00f3n\/pastilla que ve el usuario\n\/\/ - reason: frase corta usada en el resultado final para\n\/\/ explicar \"por qu\u00e9 se recomienda\" (ej: \"es una escapada en\n\/\/ pareja\"). Se combina as\u00ed: \"La recomendamos porque \" + reason\n\/\/ ------------------------------------------------------------\nconst QUESTIONS = [\n {\n id: \"con_quien\",\n question: \"\u00bfCon qui\u00e9n ven\u00eds?\",\n options: [\n { id: \"pareja\", label: \"Pareja\", reason: \"es una escapada en pareja\" },\n { id: \"familia\", label: \"Familia\", reason: \"ven\u00eds en familia\" },\n { id: \"amigos\", label: \"Amigos\", reason: \"ven\u00eds con amigos\" },\n { id: \"solo\", label: \"Solo\/a\", reason: \"busc\u00e1s un momento a solas\" },\n { id: \"mascota\", label: \"Con mascota\", reason: \"ven\u00eds acompa\u00f1ados de vuestra mascota\" }\n ]\n },\n {\n id: \"escapada_para\",\n question: \"Esta escapada es para...\",\n options: [\n { id: \"desconectar\", label: \"Desconectar\", reason: \"busc\u00e1is desconectar del todo\" },\n { id: \"sorprender\", label: \"Sorprender a alguien\", reason: \"quer\u00e9is sorprender a alguien especial\" },\n { id: \"explorar\", label: \"Explorar la zona\", reason: \"os apetece explorar el Solson\u00e8s\" }\n ]\n },\n {\n id: \"como_dormis\",\n question: \"\u00bfC\u00f3mo dorm\u00eds?\",\n options: [\n { id: \"tatami\", label: \"Tatami y fut\u00f3n\", reason: \"os gusta dormir sobre tatami y fut\u00f3n, al estilo japon\u00e9s m\u00e1s aut\u00e9ntico\" },\n { id: \"colchon_bajo\", label: \"Colch\u00f3n bajo\", reason: \"prefer\u00eds un colch\u00f3n bajo, a ras de tarima\" },\n { id: \"cama_alta\", label: \"Cama alta\", reason: \"prefer\u00eds una cama alta\" }\n ]\n },\n {\n id: \"banera_ducha\",\n question: \"\u00bfBa\u00f1era o ducha?\",\n options: [\n { id: \"banera\", label: \"Ba\u00f1era\", reason: \"os apetece relajaros en una ba\u00f1era\" },\n { id: \"ducha\", label: \"Ducha\", reason: \"prefer\u00eds una ducha \u00e1gil tipo rainshower\" }\n ]\n },\n {\n id: \"manana\",\n question: \"Por la ma\u00f1ana prefer\u00eds...\",\n options: [\n { id: \"sol\", label: \"Luz de sol\", reason: \"os gusta despertar con la luz del sol entrando en la habitaci\u00f3n\" },\n { id: \"oscuridad\", label: \"Oscuridad total\", reason: \"prefer\u00eds que la ma\u00f1ana entre despacio, en penumbra\" }\n ]\n },\n {\n id: \"vista\",\n question: \"La vista, \u00bfbosque o piscina?\",\n options: [\n { id: \"bosque\", label: \"Bosque\", reason: \"busc\u00e1is la vista al bosque que envuelve la masia\" },\n { id: \"piscina\", label: \"Piscina\", reason: \"quer\u00e9is la piscina en primer plano\" }\n ]\n }\n];\n\n\n\/\/ ------------------------------------------------------------\n\/\/ 3. HABITACIONES\n\/\/ Datos completos de las 8 habitaciones, tal como figuran en la\n\/\/ web del hotel (texto original en catal\u00e1n, adaptado aqu\u00ed al\n\/\/ castellano para que combine con el resto del test). Si el\n\/\/ hotel tiene una versi\u00f3n oficial en castellano de estos textos,\n\/\/ se puede pegar directamente en \"meaning\" y \"line\".\n\/\/\n\/\/ - id: identificador interno (debe coincidir con el usado en\n\/\/ la tabla de puntajes, punto 4)\n\/\/ - name: nombre de la habitaci\u00f3n\n\/\/ - meaning: qu\u00e9 significa el nombre\n\/\/ - line: frase evocadora, tomada de la descripci\u00f3n real, que\n\/\/ se muestra en el resultado final\n\/\/ - image: foto de portada de la habitaci\u00f3n. Est\u00e1n tomadas\n\/\/ directamente de la web del hotel (mismo dominio), as\u00ed que\n\/\/ el archivo sigue siendo liviano. Si quer\u00e9s cambiar alguna,\n\/\/ solo hace falta reemplazar la URL por otra imagen del hotel\n\/\/ (o subir la tuya a alg\u00fan sitio y pegar el link ac\u00e1).\n\/\/ - description: descripci\u00f3n completa (por si quer\u00e9s usarla en\n\/\/ otra parte de la web o ampliar el resultado m\u00e1s adelante)\n\/\/ - characteristics: lista de caracter\u00edsticas tal como figuran\n\/\/ en la ficha real de la habitaci\u00f3n\n\/\/ ------------------------------------------------------------\nconst ROOMS = [\n {\n id: \"HARU\",\n name: \"Haru\",\n meaning: \"Significa primavera, la estaci\u00f3n m\u00e1s esperada del a\u00f1o.\",\n line: \"Vistas al imponente bosque que envuelve la mas\u00eda, con los colores cambiantes de cada estaci\u00f3n.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/haru2-scaled.jpg\",\n description: \"Aquesta habitaci\u00f3 t\u00e9 unes espectaculars vistes a l'imponent bosc que envolta la masia i des de l'habitaci\u00f3 es poden contemplar els canviants colors de les estacions.\",\n characteristics: [\n \"Dos colchones de 90x190cm, en formato matrimonio o individual, sobre tarima de madera a poca altura del suelo\",\n \"Ba\u00f1o con ba\u00f1era y ducha rainshower\",\n \"TV, aire acondicionado y calefacci\u00f3n\",\n \"Ventana y balc\u00f3n orientados al sur, con vistas al Serrat de Sant Miquel\",\n \"Conserva una antigua 'teiera', el rinc\u00f3n donde antes se encend\u00eda el fuego para iluminar la estancia\"\n ]\n },\n {\n id: \"NATSU\",\n name: \"Natsu\",\n meaning: \"Significa verano.\",\n line: \"Un balc\u00f3n orientado al suroeste que invita a salir a ver la puesta de sol tras la colina, y una abertura sobre la cama para observar las estrellas.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/natsu3-scaled.jpg\",\n description: \"Habitaci\u00f3 amb balc\u00f3, orientada a sud oest, on a l'estiu et convida a sortir i observar la posta de sol, just darrera el tur\u00f3 que queda a davant de la nostra vista.\",\n characteristics: [\n \"Dos colchones de 90x190cm, en formato matrimonio o individual, sobre tarima de madera a poca altura del suelo\",\n \"Ba\u00f1o con ba\u00f1era y ducha rainshower\",\n \"Gran terraza con mesa y sillas de exterior\",\n \"Abertura especial sobre el balc\u00f3n para observar las estrellas desde la cama\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n },\n {\n id: \"AKI\",\n name: \"Aki\",\n meaning: \"Significa oto\u00f1o.\",\n line: \"Las ventanas miran al robledal de Timoneda, un espect\u00e1culo de amarillos y marrones c\u00e1lidos, especialmente al atardecer.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/aki2-scaled.jpg\",\n description: \"Les finestres de l'habitaci\u00f3 tenen les millors vistes a la roureda de Timoneda, un espectacle de colors especialment a la tardor.\",\n characteristics: [\n \"Dos colchones de 90x190cm sobre tarima de madera, con cojines de estilo nip\u00f3n para sentarse a ras de suelo\",\n \"Ba\u00f1o con ducha rainshower\",\n \"Dos ventanas orientadas al robledal, por donde entra la luz del atardecer\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n },\n {\n id: \"MIZU\",\n name: \"Mizu\",\n meaning: \"Significa agua, uno de los cuatro elementos naturales.\",\n line: \"Desde sus ventanas se ve en primera l\u00ednea la piscina, con el bosque de pinos y robles como tel\u00f3n de fondo.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/mizu2-scaled.jpg\",\n description: \"Des de les finestres d'aquesta habitaci\u00f3 es pot observar a primera l\u00ednia la piscina i on allarga la vista l'espectacular bosc de pins i roures que envolta la masia.\",\n characteristics: [\n \"Dos colchones de 90x190cm sobre tarima de madera, con posibilidad de a\u00f1adir futones extra\",\n \"Ba\u00f1o con ducha rainshower\",\n \"Tres ventanas orientadas al este, para ver salir el sol, y una gran ventana al norte\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n },\n {\n id: \"FUYU\",\n name: \"Fuyu\",\n meaning: \"Significa invierno.\",\n line: \"El antiguo espacio del fuego y el horno de la mas\u00eda, donde antes se pasaban las largas noches de invierno.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/Fuyu2-scaled.jpg\",\n description: \"A Jap\u00f3 tenen molta import\u00e0ncia les estacions i aquesta habitaci\u00f3 havia estat l'espai del foc i del forn de la masia.\",\n characteristics: [\n \"Habitaci\u00f3n adaptada, con cama de matrimonio o dos individuales elevadas (no a ras de suelo)\",\n \"Ba\u00f1o con ducha rainshower\",\n \"Dos ventanas con vistas al bosque, orientadas a sur y oeste\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n },\n {\n id: \"TSUKI\",\n name: \"Tsuki\",\n meaning: \"Significa luna.\",\n line: \"En las antiguas buhardillas de la mas\u00eda, una ventana abovedada invita a observar la luna que vela la noche.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/tsuki3-scaled.jpg\",\n description: \"L'habitaci\u00f3 est\u00e0 orientada amb vistes a sud est, a les antigues golfes de la masia, amb una finestra de volta que convida a observar la lluna.\",\n characteristics: [\n \"Habitaci\u00f3n tradicional japonesa, con suelo de tatami y fut\u00f3n, en formato matrimonio o individual\",\n \"Ba\u00f1o con ba\u00f1era y ducha rainshower\",\n \"Orientada al sureste, perfecta para ver salir el sol\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n },\n {\n id: \"KAZE\",\n name: \"Kaze\",\n meaning: \"Significa viento, s\u00edmbolo de movimiento y de creaci\u00f3n.\",\n line: \"En las antiguas buhardillas donde se guardaba el grano de la cosecha para que se secara.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/kaze2-scaled.jpg\",\n description: \"Dona nom a aquesta habitaci\u00f3 ubicada a les antigues golfes de la masia, on s'hi guardava el cereal de la collita perqu\u00e8 s'assequ\u00e9s.\",\n characteristics: [\n \"Habitaci\u00f3n tradicional japonesa, con suelo de tatami y fut\u00f3n, en formato matrimonio o individual\",\n \"Posibilidad de configuraci\u00f3n triple\",\n \"Ba\u00f1o con ba\u00f1era y ducha rainshower\",\n \"Orientada al este, recibe los primeros rayos de sol\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n },\n {\n id: \"ISHI\",\n name: \"Ishi\",\n meaning: \"Significa piedra.\",\n line: \"La piedra que envuelve toda la mas\u00eda, s\u00edmbolo de unidad y fuerza, base de la casa catalana.\",\n image: \"https:\/\/hoteljaponespuigpinos.com\/wp-content\/uploads\/2025\/12\/ishi2-scaled.jpg\",\n description: \"Element de gran import\u00e0ncia pel poble japon\u00e8s i la base de la masia catalana. S\u00edmbol de la unitat i la for\u00e7a.\",\n characteristics: [\n \"Habitaci\u00f3n tradicional japonesa, con suelo de tatami y fut\u00f3n, en formato matrimonio o individual\",\n \"Ba\u00f1o con ba\u00f1era y ducha rainshower\",\n \"Orientada al norte, con vistas a la iglesia de Timoneda\",\n \"TV, aire acondicionado y calefacci\u00f3n\"\n ]\n }\n];\n\n\n\/\/ ------------------------------------------------------------\n\/\/ 4. TABLA DE PUNTAJES\n\/\/ Ac\u00e1 se define cu\u00e1ntos puntos suma cada habitaci\u00f3n cuando el\n\/\/ usuario elige una opci\u00f3n determinada. Escala usada: 0 (no\n\/\/ tiene nada que ver) a 3 (encaja perfecto). El \"% de afinidad\"\n\/\/ que se muestra en el resultado se calcula sobre esta misma\n\/\/ escala (puntaje obtenido \/ puntaje m\u00e1ximo posible), as\u00ed que si\n\/\/ cambi\u00e1s el rango de puntos, hacelo de forma pareja en toda la\n\/\/ tabla para que el porcentaje siga teniendo sentido.\n\/\/\n\/\/ Est\u00e1 organizada as\u00ed: SCORES[id de la pregunta][id de la opci\u00f3n]\n\/\/ = { HARU: n, NATSU: n, AKI: n, MIZU: n, FUYU: n, TSUKI: n,\n\/\/ KAZE: n, ISHI: n }\n\/\/\n\/\/ Los puntajes de \"como_dormis\" y \"banera_ducha\" est\u00e1n basados en\n\/\/ las caracter\u00edsticas reales y exactas de cada habitaci\u00f3n.\n\/\/ Los de \"con_quien\" (especialmente \"mascota\") son una propuesta\n\/\/ editorial razonable, ya que la web del hotel no especifica\n\/\/ pol\u00edtica de mascotas por habitaci\u00f3n \u2014 conviene confirmarlo con\n\/\/ el hotel y ajustar si hace falta.\n\/\/ ------------------------------------------------------------\nconst SCORES = {\n\n con_quien: {\n pareja: { HARU:2, NATSU:3, AKI:1, MIZU:1, FUYU:1, TSUKI:3, KAZE:1, ISHI:2 },\n familia: { HARU:1, NATSU:1, AKI:1, MIZU:3, FUYU:3, TSUKI:1, KAZE:2, ISHI:1 },\n amigos: { HARU:1, NATSU:1, AKI:2, MIZU:2, FUYU:1, TSUKI:1, KAZE:3, ISHI:1 },\n solo: { HARU:2, NATSU:1, AKI:2, MIZU:1, FUYU:1, TSUKI:3, KAZE:1, ISHI:3 },\n mascota: { HARU:2, NATSU:2, AKI:2, MIZU:2, FUYU:2, TSUKI:1, KAZE:1, ISHI:2 }\n },\n\n escapada_para: {\n desconectar: { HARU:2, NATSU:1, AKI:2, MIZU:1, FUYU:2, TSUKI:3, KAZE:2, ISHI:3 },\n sorprender: { HARU:2, NATSU:3, AKI:1, MIZU:1, FUYU:1, TSUKI:3, KAZE:1, ISHI:2 },\n explorar: { HARU:2, NATSU:2, AKI:3, MIZU:3, FUYU:2, TSUKI:1, KAZE:1, ISHI:1 }\n },\n\n como_dormis: {\n tatami: { HARU:0, NATSU:0, AKI:0, MIZU:0, FUYU:0, TSUKI:3, KAZE:3, ISHI:3 },\n colchon_bajo: { HARU:3, NATSU:3, AKI:3, MIZU:3, FUYU:0, TSUKI:0, KAZE:0, ISHI:0 },\n cama_alta: { HARU:0, NATSU:0, AKI:0, MIZU:0, FUYU:3, TSUKI:0, KAZE:0, ISHI:0 }\n },\n\n banera_ducha: {\n banera: { HARU:3, NATSU:3, AKI:0, MIZU:0, FUYU:0, TSUKI:3, KAZE:3, ISHI:3 },\n ducha: { HARU:1, NATSU:1, AKI:3, MIZU:3, FUYU:3, TSUKI:1, KAZE:1, ISHI:1 }\n },\n\n manana: {\n sol: { HARU:1, NATSU:0, AKI:0, MIZU:3, FUYU:0, TSUKI:3, KAZE:3, ISHI:0 },\n oscuridad: { HARU:1, NATSU:2, AKI:2, MIZU:0, FUYU:2, TSUKI:0, KAZE:0, ISHI:3 }\n },\n\n vista: {\n bosque: { HARU:3, NATSU:3, AKI:3, MIZU:1, FUYU:3, TSUKI:0, KAZE:0, ISHI:0 },\n piscina: { HARU:0, NATSU:0, AKI:0, MIZU:3, FUYU:0, TSUKI:0, KAZE:0, ISHI:0 }\n }\n\n};\n\n<\/script>\n\n\n\n<div id=\"app\"><\/div>\n\n<style>\n :root{\n --bg: #E3DFDA;\n --accent: #CB6754;\n --text: #424242;\n --white: #FFFFFF;\n }\n\n *{ box-sizing: border-box; }\n\n #app{\n background: var(--bg);\n color: var(--text);\n font-family: 'Nunito Sans', sans-serif;\n min-height: 100vh;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 24px 16px 56px;\n }\n\n .puig-h1{\n font-family: 'Jost', sans-serif;\n color: var(--accent);\n font-weight: 500;\n letter-spacing: 0.01em;\n }\n\n .puig-wrap{\n width: 100%;\n max-width: 560px;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .puig-kanji{\n font-family: 'Jost', sans-serif;\n color: var(--accent);\n font-size: 12px;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n opacity: 0.7;\n margin-bottom: 6px;\n }\n\n .puig-intro-sub{\n font-size: 14.5px;\n line-height: 1.55;\n margin: 0;\n opacity: 0.85;\n }\n\n \/* ============================================================\n PANTALLA \u00daNICA CON LAS 6 PREGUNTAS\n ============================================================ *\/\n\n .puig-card{\n width: 100%;\n background: var(--white);\n border-radius: 22px;\n padding: 26px 22px 24px;\n animation: puig-fade 0.35s ease;\n }\n @keyframes puig-fade{\n from{ opacity: 0; transform: translateY(6px); }\n to{ opacity: 1; transform: translateY(0); }\n }\n\n .puig-header{\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n padding-bottom: 20px;\n border-bottom: 1px solid rgba(66,66,66,0.12);\n margin-bottom: 22px;\n }\n .puig-header-left{ flex: 1 1 240px; }\n .puig-header-left .puig-h1{\n font-size: 21px;\n margin: 0 0 6px;\n line-height: 1.25;\n }\n\n .puig-header-right{\n flex: 0 0 110px;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 6px;\n padding-top: 4px;\n }\n .puig-progress-track{\n width: 100px;\n height: 4px;\n background: rgba(66,66,66,0.12);\n border-radius: 4px;\n overflow: hidden;\n }\n .puig-progress-fill{\n height: 100%;\n background: var(--accent);\n border-radius: 4px;\n transition: width 0.35s ease;\n width: 0%;\n }\n .puig-progress-pct{\n font-family: 'Jost', sans-serif;\n font-size: 13px;\n font-weight: 600;\n color: var(--accent);\n }\n\n .puig-questions{\n display: flex;\n flex-direction: column;\n }\n\n .puig-q-block{\n padding: 18px 0;\n border-bottom: 1px solid rgba(66,66,66,0.1);\n }\n .puig-q-block:first-child{ padding-top: 0; }\n .puig-q-block:last-child{ border-bottom: none; padding-bottom: 6px; }\n\n .puig-q-label{\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 14px;\n }\n .puig-q-number{\n flex: none;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--accent);\n color: var(--white);\n font-family: 'Jost', sans-serif;\n font-size: 12px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .puig-q-text{\n font-family: 'Jost', sans-serif;\n color: var(--accent);\n font-weight: 500;\n font-size: 17px;\n }\n .puig-q-check{\n margin-left: auto;\n color: var(--accent);\n font-size: 15px;\n opacity: 0;\n transition: opacity 0.2s ease;\n }\n .puig-q-block.is-answered .puig-q-check{ opacity: 1; }\n\n .puig-options{\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n }\n\n .puig-pill{\n font-family: 'Nunito Sans', sans-serif;\n font-weight: 700;\n font-size: 14.5px;\n color: var(--accent);\n background: var(--white);\n border: 1.5px solid var(--accent);\n border-radius: 999px;\n padding: 11px 20px;\n text-align: center;\n cursor: pointer;\n transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;\n -webkit-tap-highlight-color: transparent;\n }\n \/* El hover solo se aplica en dispositivos que realmente tienen\n puntero (mouse). En touch, :hover puede quedar \"pegado\" en el\n bot\u00f3n que cae debajo del dedo al re-renderizar, simulando una\n selecci\u00f3n que no es real. *\/\n @media (hover: hover) and (pointer: fine){\n .puig-pill:hover{\n background: var(--accent);\n color: var(--white);\n }\n }\n .puig-pill:active{\n transform: scale(0.97);\n }\n .puig-pill.is-selected{\n background: var(--accent);\n color: var(--white);\n }\n\n .puig-submit{\n width: 100%;\n margin-top: 22px;\n font-family: 'Nunito Sans', sans-serif;\n font-weight: 700;\n font-size: 16px;\n color: var(--white);\n background: var(--accent);\n border: none;\n border-radius: 999px;\n padding: 16px 26px;\n cursor: pointer;\n transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease, color 0.2s ease;\n }\n @media (hover: hover) and (pointer: fine){\n .puig-submit:not(:disabled):hover{ opacity: 0.88; }\n }\n .puig-submit:not(:disabled):active{ transform: scale(0.99); }\n .puig-submit:disabled{\n background: rgba(66,66,66,0.14);\n color: rgba(66,66,66,0.4);\n cursor: not-allowed;\n }\n\n .puig-submit-hint{\n text-align: center;\n font-size: 13px;\n color: var(--text);\n opacity: 0.55;\n margin: 12px 0 0;\n }\n\n \/* ============================================================\n RESULTADOS\n ============================================================ *\/\n\n .puig-results-intro{\n text-align: center;\n margin-bottom: 28px;\n }\n .puig-results-intro .puig-h1{\n font-size: 28px;\n text-align: center;\n margin: 6px 0 12px;\n }\n .puig-results-intro .puig-intro-sub{\n text-align: center;\n }\n\n .puig-results-list{\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 20px;\n margin-bottom: 32px;\n }\n\n .puig-room-card{\n background: var(--white);\n border-radius: 18px;\n overflow: hidden;\n text-align: left;\n }\n\n .puig-room-photo{\n position: relative;\n width: 100%;\n aspect-ratio: 4 \/ 3;\n background: rgba(66,66,66,0.08);\n }\n .puig-room-photo img{\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n .puig-match-badge{\n position: absolute;\n top: 12px;\n right: 12px;\n background: rgba(255,255,255,0.94);\n color: var(--accent);\n font-family: 'Nunito Sans', sans-serif;\n font-weight: 700;\n font-size: 12px;\n padding: 6px 12px;\n border-radius: 999px;\n letter-spacing: 0.01em;\n }\n\n .puig-room-body{\n padding: 22px 22px 24px;\n }\n .puig-room-name{\n font-family: 'Jost', sans-serif;\n color: var(--accent);\n font-size: 22px;\n font-weight: 600;\n margin: 0 0 2px;\n }\n .puig-room-meaning{\n font-size: 13px;\n font-style: italic;\n opacity: 0.65;\n margin: 0 0 14px;\n }\n .puig-room-line{\n font-size: 15px;\n line-height: 1.55;\n margin: 0 0 14px;\n }\n .puig-room-reason{\n font-size: 14px;\n line-height: 1.5;\n color: var(--accent);\n margin: 0;\n padding-top: 14px;\n border-top: 1px solid rgba(203,103,84,0.2);\n }\n\n .puig-cta{\n display: inline-block;\n font-family: 'Nunito Sans', sans-serif;\n font-weight: 700;\n font-size: 16px;\n color: var(--white);\n background: var(--accent);\n text-decoration: none;\n border-radius: 999px;\n padding: 17px 46px;\n text-align: center;\n transition: opacity 0.2s ease, transform 0.15s ease;\n }\n @media (hover: hover) and (pointer: fine){\n .puig-cta:hover{ opacity: 0.88; }\n }\n .puig-cta:active{ transform: scale(0.98); }\n\n .puig-restart{\n background: none;\n border: none;\n color: var(--text);\n opacity: 0.55;\n font-family: 'Nunito Sans', sans-serif;\n font-size: 13px;\n cursor: pointer;\n margin-top: 22px;\n text-decoration: underline;\n -webkit-tap-highlight-color: transparent;\n }\n\n @media (min-width: 560px){\n .puig-card{ padding: 34px 34px 30px; }\n .puig-header-left .puig-h1{ font-size: 24px; }\n }\n<\/style>\n\n\n<script>\n(function(){\n\n const app = document.getElementById('app');\n const answers = {}; \/\/ { questionId: optionId }\n let view = 'form'; \/\/ 'form' | 'results'\n\n function init(){\n if (view === 'form') renderForm();\n else renderResults();\n }\n\n function renderForm(){\n app.innerHTML = '';\n const wrap = document.createElement('div');\n wrap.className = 'puig-wrap';\n\n wrap.innerHTML = `\n <div class=\"puig-card\">\n <div class=\"puig-header\">\n <div class=\"puig-header-left\">\n <div class=\"puig-kanji\">\u5bbf\u6cca<\/div>\n <h1 class=\"puig-h1\">Encontr\u00e1 tu habitaci\u00f3n<\/h1>\n <p class=\"puig-intro-sub\">Respond\u00e9 estas preguntas y te recomendamos las 3 habitaciones que mejor encajan.<\/p>\n <\/div>\n <div class=\"puig-header-right\">\n <div class=\"puig-progress-track\"><div class=\"puig-progress-fill\" id=\"progressFill\"><\/div><\/div>\n <div class=\"puig-progress-pct\" id=\"progressPct\">0%<\/div>\n <\/div>\n <\/div>\n <div class=\"puig-questions\" id=\"questionsWrap\"><\/div>\n <button class=\"puig-submit\" id=\"submitBtn\" type=\"button\" disabled>Ver mi resultado<\/button>\n <p class=\"puig-submit-hint\" id=\"submitHint\"><\/p>\n <\/div>\n `;\n\n const questionsWrap = wrap.querySelector('#questionsWrap');\n\n QUESTIONS.forEach((q, qIndex) => {\n const block = document.createElement('div');\n block.className = 'puig-q-block';\n block.dataset.qid = q.id;\n block.innerHTML = `\n <div class=\"puig-q-label\">\n <span class=\"puig-q-number\">${qIndex + 1}<\/span>\n <span class=\"puig-q-text\">${q.question}<\/span>\n <span class=\"puig-q-check\">✓<\/span>\n <\/div>\n <div class=\"puig-options\"><\/div>\n `;\n\n const optionsContainer = block.querySelector('.puig-options');\n q.options.forEach(opt => {\n const btn = document.createElement('button');\n btn.type = 'button';\n btn.className = 'puig-pill';\n btn.textContent = opt.label;\n btn.addEventListener('click', () => {\n answers[q.id] = opt.id;\n optionsContainer.querySelectorAll('.puig-pill').forEach(p => p.classList.remove('is-selected'));\n btn.classList.add('is-selected');\n block.classList.add('is-answered');\n updateProgress();\n });\n optionsContainer.appendChild(btn);\n });\n\n questionsWrap.appendChild(block);\n });\n\n wrap.querySelector('#submitBtn').addEventListener('click', () => {\n if (Object.keys(answers).length < QUESTIONS.length) return;\n view = 'results';\n init();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n });\n\n app.appendChild(wrap);\n updateProgress();\n }\n\n function updateProgress(){\n const answeredCount = Object.keys(answers).length;\n const total = QUESTIONS.length;\n const pct = Math.round((answeredCount \/ total) * 100);\n\n const fill = document.getElementById('progressFill');\n const pctLabel = document.getElementById('progressPct');\n const submitBtn = document.getElementById('submitBtn');\n const hint = document.getElementById('submitHint');\n\n if (fill) fill.style.width = pct + '%';\n if (pctLabel) pctLabel.textContent = pct + '%';\n if (submitBtn) submitBtn.disabled = answeredCount < total;\n if (hint){\n const remaining = total - answeredCount;\n hint.textContent = remaining > 0\n ? `Faltan ${remaining} pregunta${remaining === 1 ? '' : 's'} por responder`\n : '\u00a1Listo! Mir\u00e1 tu resultado';\n }\n }\n\n \/\/ Calcula el puntaje total de cada habitaci\u00f3n seg\u00fan las\n \/\/ respuestas dadas, y devuelve adem\u00e1s las 2 razones de mayor\n \/\/ peso por habitaci\u00f3n (para el texto \"por qu\u00e9 se recomienda\").\n function computeResults(){\n const totals = {};\n const reasonsByRoom = {};\n ROOMS.forEach(r => { totals[r.id] = 0; reasonsByRoom[r.id] = []; });\n\n QUESTIONS.forEach(q => {\n const chosenOptionId = answers[q.id];\n if (!chosenOptionId) return;\n const option = q.options.find(o => o.id === chosenOptionId);\n const roomScores = (SCORES[q.id] && SCORES[q.id][chosenOptionId]) || {};\n\n ROOMS.forEach(r => {\n const pts = roomScores[r.id] || 0;\n totals[r.id] += pts;\n reasonsByRoom[r.id].push({ reason: option.reason, pts });\n });\n });\n\n let ranked = ROOMS.map(r => ({\n room: r,\n score: totals[r.id],\n reasons: reasonsByRoom[r.id]\n .sort((a, b) => b.pts - a.pts)\n .filter(r2 => r2.pts > 0)\n .slice(0, 2)\n .map(r2 => r2.reason)\n }));\n\n \/\/ Mezcla aleatoria previa para que los empates no favorezcan\n \/\/ siempre al mismo orden de la lista ROOMS.\n ranked = shuffle(ranked);\n ranked.sort((a, b) => b.score - a.score);\n\n return ranked.slice(0, 3);\n }\n\n function shuffle(arr){\n const a = arr.slice();\n for (let i = a.length - 1; i > 0; i--){\n const j = Math.floor(Math.random() * (i + 1));\n [a[i], a[j]] = [a[j], a[i]];\n }\n return a;\n }\n\n \/\/ Porcentaje de afinidad mostrado en cada card de resultado,\n \/\/ sobre el puntaje m\u00e1ximo posible (todas las opciones punt\u00faan\n \/\/ en la escala 0-3, as\u00ed que el m\u00e1ximo es 3 x cantidad de\n \/\/ preguntas).\n function matchPercent(score){\n const max = QUESTIONS.length * 3;\n return Math.max(0, Math.min(100, Math.round((score \/ max) * 100)));\n }\n\n function renderResults(){\n app.innerHTML = '';\n const top3 = computeResults();\n\n const wrap = document.createElement('div');\n wrap.className = 'puig-wrap';\n\n wrap.innerHTML = `\n <div class=\"puig-results-intro\">\n <div class=\"puig-kanji\">\u7d50\u679c<\/div>\n <h1 class=\"puig-h1\">Vuestras habitaciones<\/h1>\n <p class=\"puig-intro-sub\">Seg\u00fan lo que nos contasteis, estas tres son las que mejor encajan.<\/p>\n <\/div>\n <div class=\"puig-results-list\"><\/div>\n <a class=\"puig-cta\" href=\"${BOOKING_URL}\" target=\"_blank\" rel=\"noopener\">Ver disponibilidad<\/a>\n <button class=\"puig-restart\" type=\"button\">Volver a empezar<\/button>\n `;\n\n const list = wrap.querySelector('.puig-results-list');\n top3.forEach(entry => {\n const r = entry.room;\n const pct = matchPercent(entry.score);\n const card = document.createElement('div');\n card.className = 'puig-room-card';\n\n const reasonText = entry.reasons.length\n ? 'La recomendamos porque ' + entry.reasons.join(' y ') + '.'\n : 'Una de las habitaciones que mejor combina con lo que busc\u00e1is.';\n\n card.innerHTML = `\n <div class=\"puig-room-photo\">\n <img decoding=\"async\" src=\"${r.image}\" alt=\"Habitaci\u00f3n ${r.name}\" loading=\"lazy\">\n <span class=\"puig-match-badge\">${pct}% afinidad<\/span>\n <\/div>\n <div class=\"puig-room-body\">\n <p class=\"puig-room-name\">${r.name}<\/p>\n <p class=\"puig-room-meaning\">${r.meaning}<\/p>\n <p class=\"puig-room-line\">${r.line}<\/p>\n <p class=\"puig-room-reason\">${reasonText}<\/p>\n <\/div>\n `;\n list.appendChild(card);\n });\n\n wrap.querySelector('.puig-restart').addEventListener('click', () => {\n Object.keys(answers).forEach(k => delete answers[k]);\n view = 'form';\n init();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n });\n\n app.appendChild(wrap);\n }\n\n init();\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\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>Encontr\u00e1 tu habitaci\u00f3n \u00b7 Hotel Japon\u00e8s Puigpin\u00f3s<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-5088","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Prueba - Brand 360<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/brand360studio.com\/ca\/prueba\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prueba - Brand 360\" \/>\n<meta property=\"og:description\" content=\"Encontr\u00e1 tu habitaci\u00f3n \u00b7 Hotel Japon\u00e8s Puigpin\u00f3s\" \/>\n<meta property=\"og:url\" content=\"https:\/\/brand360studio.com\/ca\/prueba\/\" \/>\n<meta property=\"og:site_name\" content=\"Brand 360\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-01T01:51:56+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"15 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/brand360studio.com\\\/prueba\\\/\",\"url\":\"https:\\\/\\\/brand360studio.com\\\/prueba\\\/\",\"name\":\"Prueba - Brand 360\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/brand360studio.com\\\/#website\"},\"datePublished\":\"2026-09-01T01:19:26+00:00\",\"dateModified\":\"2026-09-01T01:51:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/brand360studio.com\\\/prueba\\\/#breadcrumb\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/brand360studio.com\\\/prueba\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/brand360studio.com\\\/prueba\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/brand360studio.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Prueba\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/brand360studio.com\\\/#website\",\"url\":\"https:\\\/\\\/brand360studio.com\\\/\",\"name\":\"Brand 360\",\"description\":\"Agencia de marketing tur\u00edstico\",\"publisher\":{\"@id\":\"https:\\\/\\\/brand360studio.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/brand360studio.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/brand360studio.com\\\/#organization\",\"name\":\"Brand 360\",\"url\":\"https:\\\/\\\/brand360studio.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\\\/\\\/brand360studio.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/brand360studio.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Logo-nuevo-Brand-360.png\",\"contentUrl\":\"https:\\\/\\\/brand360studio.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Logo-nuevo-Brand-360.png\",\"width\":1080,\"height\":1080,\"caption\":\"Brand 360\"},\"image\":{\"@id\":\"https:\\\/\\\/brand360studio.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Prueba - Brand 360","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/brand360studio.com\/ca\/prueba\/","og_locale":"ca_ES","og_type":"article","og_title":"Prueba - Brand 360","og_description":"Encontr\u00e1 tu habitaci\u00f3n \u00b7 Hotel Japon\u00e8s Puigpin\u00f3s","og_url":"https:\/\/brand360studio.com\/ca\/prueba\/","og_site_name":"Brand 360","article_modified_time":"2026-09-01T01:51:56+00:00","twitter_card":"summary_large_image","twitter_misc":{"Temps estimat de lectura":"15 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/brand360studio.com\/prueba\/","url":"https:\/\/brand360studio.com\/prueba\/","name":"Prueba - Brand 360","isPartOf":{"@id":"https:\/\/brand360studio.com\/#website"},"datePublished":"2026-09-01T01:19:26+00:00","dateModified":"2026-09-01T01:51:56+00:00","breadcrumb":{"@id":"https:\/\/brand360studio.com\/prueba\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brand360studio.com\/prueba\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/brand360studio.com\/prueba\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/brand360studio.com\/"},{"@type":"ListItem","position":2,"name":"Prueba"}]},{"@type":"WebSite","@id":"https:\/\/brand360studio.com\/#website","url":"https:\/\/brand360studio.com\/","name":"Brand 360","description":"Agencia de marketing tur\u00edstico","publisher":{"@id":"https:\/\/brand360studio.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brand360studio.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Organization","@id":"https:\/\/brand360studio.com\/#organization","name":"Brand 360","url":"https:\/\/brand360studio.com\/","logo":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/brand360studio.com\/#\/schema\/logo\/image\/","url":"https:\/\/brand360studio.com\/wp-content\/uploads\/2024\/04\/Logo-nuevo-Brand-360.png","contentUrl":"https:\/\/brand360studio.com\/wp-content\/uploads\/2024\/04\/Logo-nuevo-Brand-360.png","width":1080,"height":1080,"caption":"Brand 360"},"image":{"@id":"https:\/\/brand360studio.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/pages\/5088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/comments?post=5088"}],"version-history":[{"count":7,"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/pages\/5088\/revisions"}],"predecessor-version":[{"id":5096,"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/pages\/5088\/revisions\/5096"}],"wp:attachment":[{"href":"https:\/\/brand360studio.com\/ca\/wp-json\/wp\/v2\/media?parent=5088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}