El Match Que No Pediste \ud83d\udc98 | Urbanista<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --pink-hot: #FF3366;\n --pink-soft: #FF6B9D;\n --pink-blush: #FFB3C6;\n --pink-pale: #FFE5EC;\n --coral: #FF7A5C;\n --gold: #FFD700;\n --dark: #1A1A2E;\n --white: #FFFFFF;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n font-family: 'DM Sans', sans-serif;\n background: linear-gradient(180deg, var(--pink-pale) 0%, var(--pink-blush) 50%, var(--pink-soft) 100%);\n min-height: 100vh;\n overflow-x: hidden;\n color: var(--dark);\n }\n\n \/* Floating Hearts Background *\/\n .hearts-bg {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n z-index: 0;\n }\n\n .floating-heart {\n position: absolute;\n font-size: 24px;\n opacity: 0.3;\n animation: floatUp 8s ease-in-out infinite;\n }\n\n @keyframes floatUp {\n 0% {\n transform: translateY(100vh) rotate(0deg) scale(0.5);\n opacity: 0;\n }\n 10% {\n opacity: 0.4;\n }\n 90% {\n opacity: 0.4;\n }\n 100% {\n transform: translateY(-100px) rotate(720deg) scale(1.2);\n opacity: 0;\n }\n }\n\n \/* Main Container - Mobile First *\/\n .app-container {\n position: relative;\n z-index: 1;\n max-width: 480px;\n margin: 0 auto;\n min-height: 100vh;\n padding: 20px;\n padding-top: 10px;\n }\n\n \/* Card Stack Container *\/\n .card-stack {\n position: relative;\n width: 100%;\n height: 610px;\n margin-bottom: 30px;\n }\n\n \/* Tinder Card *\/\n .tinder-card {\n position: absolute;\n width: 100%;\n height: 100%;\n background: var(--white);\n border-radius: 20px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);\n overflow: hidden;\n cursor: grab;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n user-select: none;\n }\n\n .tinder-card:active {\n cursor: grabbing;\n }\n\n .tinder-card.swiping-right {\n animation: swipeRight 0.6s ease-out forwards;\n }\n\n @keyframes swipeRight {\n 0% { transform: translateX(0) rotate(0); opacity: 1; }\n 100% { transform: translateX(150%) rotate(30deg); opacity: 0; }\n }\n\n \/* Carousel Styles *\/\n .card-image {\n width: 100%;\n height: 260px;\n position: relative;\n overflow: hidden;\n }\n\n .carousel-container {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n }\n\n .carousel-track {\n display: flex;\n width: 100%;\n height: 100%;\n transition: transform 0.3s ease-out;\n }\n\n .carousel-slide {\n width: 100%;\n min-width: 100%;\n height: 100%;\n flex-shrink: 0;\n position: relative;\n }\n\n .carousel-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \/* Alinear imagen hacia abajo y derecha en mobile *\/\n object-position: right bottom;\n display: block;\n }\n\n \/* En desktop, centrar las im\u00e1genes *\/\n @media (min-width: 769px) {\n .carousel-slide img {\n object-position: center center;\n }\n }\n\n .card-gradient {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 120px;\n background: linear-gradient(transparent, rgba(0,0,0,0.7));\n pointer-events: none;\n z-index: 2;\n }\n\n .card-badge {\n position: absolute;\n top: 20px;\n left: 20px;\n background: linear-gradient(135deg, var(--pink-hot), var(--coral));\n color: white;\n padding: 8px 16px;\n border-radius: 20px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 14px;\n letter-spacing: 1px;\n box-shadow: 0 4px 15px rgba(255, 51, 102, 0.4);\n z-index: 3;\n }\n\n \/* Carousel Indicators *\/\n .carousel-indicators {\n position: absolute;\n top: 12px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 6px;\n z-index: 4;\n }\n\n .carousel-indicator {\n width: 28px;\n height: 4px;\n background: rgba(255, 255, 255, 0.4);\n border-radius: 2px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .carousel-indicator.active {\n background: white;\n box-shadow: 0 1px 4px rgba(0,0,0,0.3);\n }\n\n \/* Carousel Navigation Arrows *\/\n .carousel-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 36px;\n height: 36px;\n background: rgba(255, 255, 255, 0.9);\n border: none;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 5;\n font-size: 16px;\n color: var(--dark);\n box-shadow: 0 2px 8px rgba(0,0,0,0.15);\n transition: all 0.2s ease;\n opacity: 0;\n }\n\n .card-image:hover .carousel-nav {\n opacity: 1;\n }\n\n .carousel-nav:hover {\n background: white;\n transform: translateY(-50%) scale(1.1);\n }\n\n .carousel-nav.prev {\n left: 10px;\n }\n\n .carousel-nav.next {\n right: 10px;\n }\n\n \/* Touch areas for mobile *\/\n .carousel-touch-area {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 30%;\n z-index: 4;\n cursor: pointer;\n }\n\n .carousel-touch-area.left {\n left: 0;\n }\n\n .carousel-touch-area.right {\n right: 0;\n }\n\n .match-stamp {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-15deg) scale(0);\n font-family: 'Bebas Neue', sans-serif;\n font-size: 48px;\n color: var(--pink-hot);\n border: 5px solid var(--pink-hot);\n padding: 10px 30px;\n border-radius: 10px;\n opacity: 0;\n transition: all 0.3s ease;\n pointer-events: none;\n background: rgba(255,255,255,0.95);\n z-index: 10;\n }\n\n .tinder-card.show-match .match-stamp {\n transform: translate(-50%, -50%) rotate(-15deg) scale(1);\n opacity: 1;\n }\n\n .card-content {\n padding: 20px;\n }\n\n \/* Title row with logo *\/\n .card-title-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 8px;\n }\n\n .card-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 28px;\n line-height: 1;\n color: var(--dark);\n }\n\n .card-logo {\n height: 40px;\n width: auto;\n filter: brightness(0);\n opacity: 0.7;\n }\n\n .card-subtitle {\n font-size: 14px;\n color: #666;\n margin-bottom: 15px;\n }\n\n \/* Pillars\/Tags *\/\n .card-pillars {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .pillar {\n background: var(--pink-pale);\n border-radius: 12px;\n padding: 12px 15px;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n }\n\n .pillar-icon {\n font-size: 20px;\n flex-shrink: 0;\n }\n\n .pillar-content {\n flex: 1;\n }\n\n .pillar-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 14px;\n color: var(--pink-hot);\n letter-spacing: 0.5px;\n margin-bottom: 2px;\n }\n\n .pillar-desc {\n font-size: 11px;\n color: #666;\n line-height: 1.3;\n }\n\n \/* Swipe Buttons *\/\n .swipe-buttons {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-bottom: 40px;\n }\n\n .swipe-btn {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n }\n\n .swipe-btn:hover {\n transform: scale(1.1);\n }\n\n .swipe-btn:active {\n transform: scale(0.95);\n }\n\n .btn-super {\n background: linear-gradient(135deg, #00D4FF, #00A3CC);\n color: white;\n }\n\n .btn-like {\n background: linear-gradient(135deg, var(--pink-hot), var(--coral));\n color: white;\n width: 70px;\n height: 70px;\n font-size: 32px;\n }\n\n \/* Content Sections *\/\n .content-section {\n background: white;\n border-radius: 25px;\n padding: 30px 25px;\n margin-bottom: 25px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);\n text-align: center;\n }\n\n .section-emoji {\n font-size: 48px;\n margin-bottom: 15px;\n display: block;\n animation: heartBeat 1.5s ease-in-out infinite;\n }\n\n @keyframes heartBeat {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.15); }\n }\n\n .section-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 36px;\n line-height: 1.1;\n margin-bottom: 8px;\n color: var(--dark);\n }\n\n .section-title span {\n background: linear-gradient(135deg, var(--pink-hot), var(--coral));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .section-subtitle {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 22px;\n color: var(--pink-hot);\n letter-spacing: 1px;\n }\n\n \/* Form Container *\/\n .form-container {\n background: white;\n border-radius: 25px;\n padding: 30px 25px;\n margin-bottom: 40px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);\n }\n\n .form-header {\n text-align: center;\n margin-bottom: 25px;\n }\n\n .form-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 32px;\n color: var(--dark);\n margin-bottom: 8px;\n }\n\n .form-subtitle {\n font-size: 14px;\n color: #777;\n }\n\n \/* HubSpot Form Styling *\/\n .hs-form {\n font-family: 'DM Sans', sans-serif !important;\n }\n\n .hs-form fieldset {\n max-width: 100% !important;\n }\n\n .hs-form input[type=\"text\"],\n .hs-form input[type=\"email\"],\n .hs-form input[type=\"tel\"],\n .hs-form select,\n .hs-form textarea {\n width: 100% !important;\n padding: 15px 18px !important;\n border: 2px solid #eee !important;\n border-radius: 12px !important;\n font-size: 16px !important;\n font-family: 'DM Sans', sans-serif !important;\n transition: all 0.3s ease !important;\n background: #fafafa !important;\n }\n\n .hs-form input:focus,\n .hs-form select:focus,\n .hs-form textarea:focus {\n border-color: var(--pink-hot) !important;\n background: white !important;\n outline: none !important;\n box-shadow: 0 0 0 4px rgba(255, 51, 102, 0.1) !important;\n }\n\n .hs-form label {\n font-family: 'Bebas Neue', sans-serif !important;\n font-size: 14px !important;\n color: var(--dark) !important;\n letter-spacing: 1px !important;\n margin-bottom: 8px !important;\n }\n\n .hs-form .hs-button {\n width: 100% !important;\n background: linear-gradient(135deg, var(--pink-hot), var(--coral)) !important;\n border: none !important;\n padding: 18px 30px !important;\n border-radius: 30px !important;\n font-family: 'Bebas Neue', sans-serif !important;\n font-size: 20px !important;\n letter-spacing: 2px !important;\n color: white !important;\n cursor: pointer !important;\n transition: all 0.3s ease !important;\n box-shadow: 0 8px 25px rgba(255, 51, 102, 0.4) !important;\n }\n\n .hs-form .hs-button:hover {\n transform: translateY(-2px) !important;\n box-shadow: 0 12px 35px rgba(255, 51, 102, 0.5) !important;\n }\n\n .hs-form .hs-error-msgs {\n color: var(--pink-hot) !important;\n font-size: 12px !important;\n }\n\n \/* Footer *\/\n .footer {\n text-align: center;\n padding: 30px 0;\n color: var(--dark);\n }\n\n .footer-logo-img {\n height: 24px;\n width: auto;\n filter: brightness(0);\n margin-bottom: 10px;\n }\n\n .footer-text {\n font-size: 12px;\n color: #888;\n }\n\n \/* Match Animation Overlay *\/\n .match-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n height: 100dvh;\n background: rgba(0, 0, 0, 0.9);\n display: none;\n z-index: 1000;\n overflow: hidden;\n }\n\n .match-overlay.active {\n display: block;\n animation: fadeIn 0.3s ease;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .match-content {\n text-align: center;\n padding: 40px 20px;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n max-width: 400px;\n }\n\n .match-hearts {\n font-size: 48px;\n animation: heartBeat 1s ease-in-out infinite;\n }\n\n .match-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 64px;\n background: linear-gradient(135deg, var(--pink-hot), var(--coral), var(--gold));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: matchPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n margin-bottom: 15px;\n }\n\n @keyframes matchPop {\n 0% { transform: scale(0); opacity: 0; }\n 100% { transform: scale(1); opacity: 1; }\n }\n\n .match-message {\n color: white;\n font-size: 18px;\n margin: 15px 0 25px;\n opacity: 0;\n animation: slideUp 0.5s ease 0.3s forwards;\n }\n\n @keyframes slideUp {\n from { transform: translateY(20px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n\n .match-btn {\n background: linear-gradient(135deg, var(--pink-hot), var(--coral));\n color: white;\n border: none;\n padding: 18px 50px;\n border-radius: 30px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 20px;\n letter-spacing: 2px;\n cursor: pointer;\n opacity: 0;\n animation: slideUp 0.5s ease 0.5s forwards;\n transition: transform 0.2s ease;\n }\n\n .match-btn:hover {\n transform: scale(1.05);\n }\n\n \/* Confetti *\/\n .confetti {\n position: fixed;\n width: 10px;\n height: 10px;\n animation: confettiFall 3s ease-out forwards;\n z-index: 1001;\n }\n\n @keyframes confettiFall {\n 0% {\n transform: translateY(-100px) rotate(0deg);\n opacity: 1;\n }\n 100% {\n transform: translateY(100vh) rotate(720deg);\n opacity: 0;\n }\n }\n\n \/* Responsive adjustments *\/\n @media (max-height: 700px) {\n .card-stack {\n height: 630px;\n }\n .card-image {\n height: 220px;\n }\n }\n\n \/* Mobile touch areas always visible *\/\n @media (max-width: 768px) {\n .carousel-nav {\n opacity: 0.7;\n width: 32px;\n height: 32px;\n font-size: 14px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"hearts-bg\" id=\"heartsBg\"><\/div>\n\n \n <div class=\"match-overlay\" id=\"matchOverlay\">\n <div class=\"match-content\">\n <div class=\"match-hearts\">\ud83d\udc95<\/div>\n <h1 class=\"match-title\">\u00a1IT’S A MATCH!<\/h1>\n <p class=\"match-message\">Urbanista quiere conocerte \ud83d\ude0f<\/p>\n <button class=\"match-btn\" onclick=\"closeMatch()\">VER M\u00c1S DETALLES<\/button>\n <\/div>\n <\/div>\n\n <div class=\"app-container\">\n \n <div class=\"card-stack\" id=\"cardStack\">\n <div class=\"tinder-card\" id=\"tinderCard\">\n <div class=\"card-image\">\n <div class=\"carousel-container\" id=\"carouselContainer\">\n \n <div class=\"carousel-indicators\" id=\"carouselIndicators\"><\/div>\n \n \n <div class=\"carousel-track\" id=\"carouselTrack\">\n \n <\/div>\n \n \n <button class=\"carousel-nav prev\" onclick=\"prevSlide(event)\">\u2039<\/button>\n <button class=\"carousel-nav next\" onclick=\"nextSlide(event)\">\u203a<\/button>\n \n \n <div class=\"carousel-touch-area left\" onclick=\"prevSlide(event)\"><\/div>\n <div class=\"carousel-touch-area right\" onclick=\"nextSlide(event)\"><\/div>\n <\/div>\n <div class=\"card-gradient\"><\/div>\n <span class=\"card-badge\">\ud83d\udd25 NUEVO<\/span>\n <div class=\"match-stamp\">MATCH \ud83d\udc95<\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"card-title-row\">\n <h2 class=\"card-title\">Tu Depa Ideal, 25<\/h2>\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2024\/06\/Logo-Negro-Urbanista.png\" alt=\"Urbanista\" class=\"card-logo\">\n <\/div>\n <p class=\"card-subtitle\">\ud83d\udccd A 2km de ti \u2022 CDMX<\/p>\n <div class=\"card-pillars\">\n <div class=\"pillar\">\n <span class=\"pillar-icon\">\ud83c\udfdd\ufe0f<\/span>\n <div class=\"pillar-content\">\n <div class=\"pillar-title\">TU OASIS URBANO<\/div>\n <div class=\"pillar-desc\">A\/C, silencio y seguridad. Vive por encima del ruido.<\/div>\n <\/div>\n <\/div>\n <div class=\"pillar\">\n <span class=\"pillar-icon\">\u2728<\/span>\n <div class=\"pillar-content\">\n <div class=\"pillar-title\">RENTA F\u00c1CIL<\/div>\n <div class=\"pillar-desc\">Sin aval, arreglos r\u00e1pidos, servicios incluidos. Cero drama.<\/div>\n <\/div>\n <\/div>\n <div class=\"pillar\">\n <span class=\"pillar-icon\">\ud83c\udf89<\/span>\n <div class=\"pillar-content\">\n <div class=\"pillar-title\">COMPARTE Y RECARGA<\/div>\n <div class=\"pillar-desc\">Hostea como pro: El spot que tu crush no querr\u00e1 dejar.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"swipe-buttons\">\n <button class=\"swipe-btn btn-super\" onclick=\"superLike()\">\u2b50<\/button>\n <button class=\"swipe-btn btn-like\" onclick=\"swipeRight()\">\u2764\ufe0f<\/button>\n <\/div>\n\n \n <section class=\"content-section\">\n <span class=\"section-emoji\">\ud83d\udc98<\/span>\n <h2 class=\"section-title\">EL MATCH QUE <span>NO PEDISTE<\/span><\/h2>\n <p class=\"section-subtitle\">(El que s\u00ed funciona)<\/p>\n <\/section>\n\n \n <div class=\"form-container\">\n <div class=\"form-header\">\n <h2 class=\"form-title\">\u00bfHACEMOS MATCH?<\/h2>\n <p class=\"form-subtitle\">D\u00e9janos tus datos y encontremos tu depa ideal<\/p>\n <\/div>\n \n <div id=\"hubspotForm\">\n <script charset=\"utf-8\" type=\"text\/javascript\" src=\"\/\/js.hsforms.net\/forms\/embed\/v2.js\"><\/script>\n <script>\n hbspt.forms.create({\n portalId: \"47830887\",\n formId: \"35ec516d-61e9-400f-aea8-d9aa0ab193c8\",\n region: \"na1\"\n });\n <\/script>\n <\/div>\n <\/div>\n\n \n <footer class=\"footer\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2024\/06\/Logo-Negro-Urbanista.png\" alt=\"Urbanista\" class=\"footer-logo-img\">\n <p class=\"footer-text\">El match perfecto para tu nuevo hogar \ud83d\udc95<\/p>\n <\/footer>\n <\/div>\n\n <script>\n \/\/ Carousel Images\n const carouselImages = [\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/cocina-lounge-2-scaled.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/gaming-zone-1-scaled.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/Cocina-lounge-3-scaled.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_aqqz4jaqqz4jaqqz-1.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_kahrtdkahrtdkahr.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/sala-tv-scaled.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/62e4924b-986d-4295-a2da-0c55ea1877b4.jpg',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_qkw57iqkw57iqkw5.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2025\/10\/cine-joaquina-del-valle.jpg',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2025\/10\/futbolito-magda.jpg',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/gimnasio-scaled.png'\n ];\n\n let currentSlide = 0;\n let carouselInterval;\n let totalSlides = carouselImages.length;\n\n \/\/ Initialize Carousel\n function initCarousel() {\n const track = document.getElementById('carouselTrack');\n const indicators = document.getElementById('carouselIndicators');\n \n track.innerHTML = '';\n indicators.innerHTML = '';\n \n carouselImages.forEach((src, index) => {\n const slide = document.createElement('div');\n slide.className = 'carousel-slide';\n slide.innerHTML = '<img decoding=\"async\" src=\"' + src + '\" alt=\"Departamento ' + (index + 1) + '\" loading=\"lazy\">';\n track.appendChild(slide);\n \n const indicator = document.createElement('div');\n indicator.className = 'carousel-indicator' + (index === 0 ? ' active' : '');\n indicator.onclick = function(e) { goToSlide(index, e); };\n indicators.appendChild(indicator);\n });\n \n updateCarousel();\n startAutoPlay();\n }\n\n function updateCarousel() {\n const track = document.getElementById('carouselTrack');\n const indicators = document.querySelectorAll('.carousel-indicator');\n \n const translateValue = -(currentSlide * 100);\n track.style.transform = 'translateX(' + translateValue + '%)';\n \n indicators.forEach(function(ind, index) {\n ind.classList.toggle('active', index === currentSlide);\n });\n }\n\n function nextSlide(e) {\n if (e) {\n e.stopPropagation();\n e.preventDefault();\n }\n currentSlide = (currentSlide + 1) % totalSlides;\n updateCarousel();\n resetAutoPlay();\n }\n\n function prevSlide(e) {\n if (e) {\n e.stopPropagation();\n e.preventDefault();\n }\n currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;\n updateCarousel();\n resetAutoPlay();\n }\n\n function goToSlide(index, e) {\n if (e) {\n e.stopPropagation();\n e.preventDefault();\n }\n currentSlide = index;\n updateCarousel();\n resetAutoPlay();\n }\n\n function startAutoPlay() {\n carouselInterval = setInterval(function() {\n currentSlide = (currentSlide + 1) % totalSlides;\n updateCarousel();\n }, 4000);\n }\n\n function resetAutoPlay() {\n clearInterval(carouselInterval);\n startAutoPlay();\n }\n\n document.addEventListener('DOMContentLoaded', initCarousel);\n \n if (document.readyState !== 'loading') {\n initCarousel();\n }\n\n \/\/ Create floating hearts\n function createHearts() {\n const container = document.getElementById('heartsBg');\n const hearts = ['\ud83d\udc95', '\ud83d\udc96', '\ud83d\udc97', '\ud83d\udc93', '\ud83d\udc98', '\u2764\ufe0f', '\ud83e\ude77'];\n \n for (let i = 0; i < 15; i++) {\n const heart = document.createElement('div');\n heart.className = 'floating-heart';\n heart.textContent = hearts[Math.floor(Math.random() * hearts.length)];\n heart.style.left = Math.random() * 100 + '%';\n heart.style.animationDelay = Math.random() * 8 + 's';\n heart.style.animationDuration = (8 + Math.random() * 4) + 's';\n container.appendChild(heart);\n }\n }\n createHearts();\n\n \/\/ Tinder card swipe functionality\n const card = document.getElementById('tinderCard');\n let startX, currentX, isDragging = false;\n let isCarouselInteraction = false;\n\n card.addEventListener('touchstart', handleTouchStart, { passive: true });\n card.addEventListener('touchmove', handleTouchMove, { passive: true });\n card.addEventListener('touchend', handleTouchEnd);\n card.addEventListener('mousedown', handleMouseDown);\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n\n function isCarouselElement(target) {\n return target.closest('.carousel-nav') || \n target.closest('.carousel-indicator') || \n target.closest('.carousel-touch-area');\n }\n\n function handleTouchStart(e) {\n if (isCarouselElement(e.target)) {\n isCarouselInteraction = true;\n return;\n }\n isCarouselInteraction = false;\n startX = e.touches[0].clientX;\n isDragging = true;\n }\n\n function handleMouseDown(e) {\n if (isCarouselElement(e.target)) {\n isCarouselInteraction = true;\n return;\n }\n isCarouselInteraction = false;\n startX = e.clientX;\n isDragging = true;\n card.style.cursor = 'grabbing';\n }\n\n function handleTouchMove(e) {\n if (!isDragging || isCarouselInteraction) return;\n currentX = e.touches[0].clientX;\n updateCardPosition();\n }\n\n function handleMouseMove(e) {\n if (!isDragging || isCarouselInteraction) return;\n currentX = e.clientX;\n updateCardPosition();\n }\n\n function updateCardPosition() {\n const diff = currentX - startX;\n const rotation = diff * 0.1;\n card.style.transform = 'translateX(' + diff + 'px) rotate(' + rotation + 'deg)';\n \n if (diff > 50) {\n card.classList.add('show-match');\n } else {\n card.classList.remove('show-match');\n }\n }\n\n function handleTouchEnd() {\n if (isCarouselInteraction) {\n isCarouselInteraction = false;\n return;\n }\n finishSwipe();\n }\n\n function handleMouseUp() {\n if (isCarouselInteraction) {\n isCarouselInteraction = false;\n return;\n }\n if (!isDragging) return;\n card.style.cursor = 'grab';\n finishSwipe();\n }\n\n function finishSwipe() {\n if (!isDragging) return;\n isDragging = false;\n \n const diff = currentX - startX;\n \n if (diff > 100) {\n swipeRight();\n } else {\n card.style.transform = '';\n card.classList.remove('show-match');\n }\n }\n\n function swipeRight() {\n card.classList.add('swiping-right');\n showMatch();\n }\n\n function superLike() {\n card.style.transform = 'scale(1.1)';\n setTimeout(function() {\n card.classList.add('swiping-right');\n showMatch();\n }, 200);\n }\n\n function resetCard() {\n card.classList.remove('swiping-right', 'show-match');\n card.style.transform = '';\n currentSlide = 0;\n updateCarousel();\n }\n\n function showMatch() {\n const overlay = document.getElementById('matchOverlay');\n overlay.classList.add('active');\n createConfetti();\n \n if (navigator.vibrate) {\n navigator.vibrate([100, 50, 100]);\n }\n }\n\n function closeMatch() {\n const overlay = document.getElementById('matchOverlay');\n overlay.classList.remove('active');\n resetCard();\n \n document.querySelector('.form-container').scrollIntoView({ \n behavior: 'smooth',\n block: 'center'\n });\n }\n\n function createConfetti() {\n const colors = ['#FF3366', '#FF6B9D', '#FFB3C6', '#FFD700', '#FF7A5C'];\n \n for (let i = 0; i < 50; i++) {\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n confetti.style.left = Math.random() * 100 + '%';\n confetti.style.top = '-20px';\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n confetti.style.animationDelay = Math.random() * 0.5 + 's';\n confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';\n document.body.appendChild(confetti);\n \n setTimeout(function() { confetti.remove(); }, 3000);\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El Match Que No Pediste \ud83d\udc98 | Urbanista \ud83d\udc95 \u00a1IT’S A MATCH! Urbanista quiere conocerte \ud83d\ude0f VER M\u00c1S DETALLES \u2039 \u203a \ud83d\udd25 NUEVO MATCH \ud83d\udc95 Tu Depa Ideal, 25 \ud83d\udccd A 2km de ti \u2022 CDMX \ud83c\udfdd\ufe0f TU OASIS URBANO A\/C, silencio y seguridad. Vive por encima del ruido. \u2728 RENTA F\u00c1CIL Sin aval, arreglos […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-17222","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/17222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/comments?post=17222"}],"version-history":[{"count":0,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/17222\/revisions"}],"wp:attachment":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/media?parent=17222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":17222,"date":"2025-12-03T11:05:42","date_gmt":"2025-12-03T17:05:42","guid":{"rendered":"https:\/\/urbanista.mx\/?page_id=17222"},"modified":"2026-01-27T13:30:32","modified_gmt":"2026-01-27T19:30:32","slug":"match","status":"publish","type":"page","link":"https:\/\/urbanista.mx\/en\/match\/","title":{"rendered":"Match | Departamentos en renta en Ciudad de M\u00e9xico | Urbanista"},"content":{"rendered":"\n\n\n\n \n \n El Match Que No Pediste \ud83d\udc98 | Urbanista<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --pink-hot: #FF3366;\n --pink-soft: #FF6B9D;\n --pink-blush: #FFB3C6;\n --pink-pale: #FFE5EC;\n --coral: #FF7A5C;\n --gold: #FFD700;\n --dark: #1A1A2E;\n --white: #FFFFFF;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n font-family: 'DM Sans', sans-serif;\n background: linear-gradient(180deg, var(--pink-pale) 0%, var(--pink-blush) 50%, var(--pink-soft) 100%);\n min-height: 100vh;\n overflow-x: hidden;\n color: var(--dark);\n }\n\n \/* Floating Hearts Background *\/\n .hearts-bg {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n z-index: 0;\n }\n\n .floating-heart {\n position: absolute;\n font-size: 24px;\n opacity: 0.3;\n animation: floatUp 8s ease-in-out infinite;\n }\n\n @keyframes floatUp {\n 0% {\n transform: translateY(100vh) rotate(0deg) scale(0.5);\n opacity: 0;\n }\n 10% {\n opacity: 0.4;\n }\n 90% {\n opacity: 0.4;\n }\n 100% {\n transform: translateY(-100px) rotate(720deg) scale(1.2);\n opacity: 0;\n }\n }\n\n \/* Main Container - Mobile First *\/\n .app-container {\n position: relative;\n z-index: 1;\n max-width: 480px;\n margin: 0 auto;\n min-height: 100vh;\n padding: 20px;\n padding-top: 10px;\n }\n\n \/* Card Stack Container *\/\n .card-stack {\n position: relative;\n width: 100%;\n height: 610px;\n margin-bottom: 30px;\n }\n\n \/* Tinder Card *\/\n .tinder-card {\n position: absolute;\n width: 100%;\n height: 100%;\n background: var(--white);\n border-radius: 20px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);\n overflow: hidden;\n cursor: grab;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n user-select: none;\n }\n\n .tinder-card:active {\n cursor: grabbing;\n }\n\n .tinder-card.swiping-right {\n animation: swipeRight 0.6s ease-out forwards;\n }\n\n @keyframes swipeRight {\n 0% { transform: translateX(0) rotate(0); opacity: 1; }\n 100% { transform: translateX(150%) rotate(30deg); opacity: 0; }\n }\n\n \/* Carousel Styles *\/\n .card-image {\n width: 100%;\n height: 260px;\n position: relative;\n overflow: hidden;\n }\n\n .carousel-container {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n }\n\n .carousel-track {\n display: flex;\n width: 100%;\n height: 100%;\n transition: transform 0.3s ease-out;\n }\n\n .carousel-slide {\n width: 100%;\n min-width: 100%;\n height: 100%;\n flex-shrink: 0;\n position: relative;\n }\n\n .carousel-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \/* Alinear imagen hacia abajo y derecha en mobile *\/\n object-position: right bottom;\n display: block;\n }\n\n \/* En desktop, centrar las im\u00e1genes *\/\n @media (min-width: 769px) {\n .carousel-slide img {\n object-position: center center;\n }\n }\n\n .card-gradient {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 120px;\n background: linear-gradient(transparent, rgba(0,0,0,0.7));\n pointer-events: none;\n z-index: 2;\n }\n\n .card-badge {\n position: absolute;\n top: 20px;\n left: 20px;\n background: linear-gradient(135deg, var(--pink-hot), var(--coral));\n color: white;\n padding: 8px 16px;\n border-radius: 20px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 14px;\n letter-spacing: 1px;\n box-shadow: 0 4px 15px rgba(255, 51, 102, 0.4);\n z-index: 3;\n }\n\n \/* Carousel Indicators *\/\n .carousel-indicators {\n position: absolute;\n top: 12px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 6px;\n z-index: 4;\n }\n\n .carousel-indicator {\n width: 28px;\n height: 4px;\n background: rgba(255, 255, 255, 0.4);\n border-radius: 2px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .carousel-indicator.active {\n background: white;\n box-shadow: 0 1px 4px rgba(0,0,0,0.3);\n }\n\n \/* Carousel Navigation Arrows *\/\n .carousel-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 36px;\n height: 36px;\n background: rgba(255, 255, 255, 0.9);\n border: none;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 5;\n font-size: 16px;\n color: var(--dark);\n box-shadow: 0 2px 8px rgba(0,0,0,0.15);\n transition: all 0.2s ease;\n opacity: 0;\n }\n\n .card-image:hover .carousel-nav {\n opacity: 1;\n }\n\n .carousel-nav:hover {\n background: white;\n transform: translateY(-50%) scale(1.1);\n }\n\n .carousel-nav.prev {\n left: 10px;\n }\n\n .carousel-nav.next {\n right: 10px;\n }\n\n \/* Touch areas for mobile *\/\n .carousel-touch-area {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 30%;\n z-index: 4;\n cursor: pointer;\n }\n\n .carousel-touch-area.left {\n left: 0;\n }\n\n .carousel-touch-area.right {\n right: 0;\n }\n\n .match-stamp {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-15deg) scale(0);\n font-family: 'Bebas Neue', sans-serif;\n font-size: 48px;\n color: var(--pink-hot);\n border: 5px solid var(--pink-hot);\n padding: 10px 30px;\n border-radius: 10px;\n opacity: 0;\n transition: all 0.3s ease;\n pointer-events: none;\n background: rgba(255,255,255,0.95);\n z-index: 10;\n }\n\n .tinder-card.show-match .match-stamp {\n transform: translate(-50%, -50%) rotate(-15deg) scale(1);\n opacity: 1;\n }\n\n .card-content {\n padding: 20px;\n }\n\n \/* Title row with logo *\/\n .card-title-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 8px;\n }\n\n .card-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 28px;\n line-height: 1;\n color: var(--dark);\n }\n\n .card-logo {\n height: 40px;\n width: auto;\n filter: brightness(0);\n opacity: 0.7;\n }\n\n .card-subtitle {\n font-size: 14px;\n color: #666;\n margin-bottom: 15px;\n }\n\n \/* Pillars\/Tags *\/\n .card-pillars {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .pillar {\n background: var(--pink-pale);\n border-radius: 12px;\n padding: 12px 15px;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n }\n\n .pillar-icon {\n font-size: 20px;\n flex-shrink: 0;\n }\n\n .pillar-content {\n flex: 1;\n }\n\n .pillar-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 14px;\n color: var(--pink-hot);\n letter-spacing: 0.5px;\n margin-bottom: 2px;\n }\n\n .pillar-desc {\n font-size: 11px;\n color: #666;\n line-height: 1.3;\n }\n\n \/* Swipe Buttons *\/\n .swipe-buttons {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-bottom: 40px;\n }\n\n .swipe-btn {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n }\n\n .swipe-btn:hover {\n transform: scale(1.1);\n }\n\n .swipe-btn:active {\n transform: scale(0.95);\n }\n\n .btn-super {\n background: linear-gradient(135deg, #00D4FF, #00A3CC);\n color: white;\n }\n\n .btn-like {\n background: linear-gradient(135deg, var(--pink-hot), var(--coral));\n color: white;\n width: 70px;\n height: 70px;\n font-size: 32px;\n }\n\n \/* Content Sections *\/\n .content-section {\n background: white;\n border-radius: 25px;\n padding: 30px 25px;\n margin-bottom: 25px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);\n text-align: center;\n }\n\n .section-emoji {\n font-size: 48px;\n margin-bottom: 15px;\n display: block;\n animation: heartBeat 1.5s ease-in-out infinite;\n }\n\n @keyframes heartBeat {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.15); }\n }\n\n .section-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 36px;\n line-height: 1.1;\n margin-bottom: 8px;\n color: var(--dark);\n }\n\n .section-title span {\n background: linear-gradient(135deg, var(--pink-hot), var(--coral));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .section-subtitle {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 22px;\n color: var(--pink-hot);\n letter-spacing: 1px;\n }\n\n \/* Form Container *\/\n .form-container {\n background: white;\n border-radius: 25px;\n padding: 30px 25px;\n margin-bottom: 40px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);\n }\n\n .form-header {\n text-align: center;\n margin-bottom: 25px;\n }\n\n .form-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 32px;\n color: var(--dark);\n margin-bottom: 8px;\n }\n\n .form-subtitle {\n font-size: 14px;\n color: #777;\n }\n\n \/* HubSpot Form Styling *\/\n .hs-form {\n font-family: 'DM Sans', sans-serif !important;\n }\n\n .hs-form fieldset {\n max-width: 100% !important;\n }\n\n .hs-form input[type=\"text\"],\n .hs-form input[type=\"email\"],\n .hs-form input[type=\"tel\"],\n .hs-form select,\n .hs-form textarea {\n width: 100% !important;\n padding: 15px 18px !important;\n border: 2px solid #eee !important;\n border-radius: 12px !important;\n font-size: 16px !important;\n font-family: 'DM Sans', sans-serif !important;\n transition: all 0.3s ease !important;\n background: #fafafa !important;\n }\n\n .hs-form input:focus,\n .hs-form select:focus,\n .hs-form textarea:focus {\n border-color: var(--pink-hot) !important;\n background: white !important;\n outline: none !important;\n box-shadow: 0 0 0 4px rgba(255, 51, 102, 0.1) !important;\n }\n\n .hs-form label {\n font-family: 'Bebas Neue', sans-serif !important;\n font-size: 14px !important;\n color: var(--dark) !important;\n letter-spacing: 1px !important;\n margin-bottom: 8px !important;\n }\n\n .hs-form .hs-button {\n width: 100% !important;\n background: linear-gradient(135deg, var(--pink-hot), var(--coral)) !important;\n border: none !important;\n padding: 18px 30px !important;\n border-radius: 30px !important;\n font-family: 'Bebas Neue', sans-serif !important;\n font-size: 20px !important;\n letter-spacing: 2px !important;\n color: white !important;\n cursor: pointer !important;\n transition: all 0.3s ease !important;\n box-shadow: 0 8px 25px rgba(255, 51, 102, 0.4) !important;\n }\n\n .hs-form .hs-button:hover {\n transform: translateY(-2px) !important;\n box-shadow: 0 12px 35px rgba(255, 51, 102, 0.5) !important;\n }\n\n .hs-form .hs-error-msgs {\n color: var(--pink-hot) !important;\n font-size: 12px !important;\n }\n\n \/* Footer *\/\n .footer {\n text-align: center;\n padding: 30px 0;\n color: var(--dark);\n }\n\n .footer-logo-img {\n height: 24px;\n width: auto;\n filter: brightness(0);\n margin-bottom: 10px;\n }\n\n .footer-text {\n font-size: 12px;\n color: #888;\n }\n\n \/* Match Animation Overlay *\/\n .match-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n height: 100dvh;\n background: rgba(0, 0, 0, 0.9);\n display: none;\n z-index: 1000;\n overflow: hidden;\n }\n\n .match-overlay.active {\n display: block;\n animation: fadeIn 0.3s ease;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .match-content {\n text-align: center;\n padding: 40px 20px;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%;\n max-width: 400px;\n }\n\n .match-hearts {\n font-size: 48px;\n animation: heartBeat 1s ease-in-out infinite;\n }\n\n .match-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 64px;\n background: linear-gradient(135deg, var(--pink-hot), var(--coral), var(--gold));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: matchPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n margin-bottom: 15px;\n }\n\n @keyframes matchPop {\n 0% { transform: scale(0); opacity: 0; }\n 100% { transform: scale(1); opacity: 1; }\n }\n\n .match-message {\n color: white;\n font-size: 18px;\n margin: 15px 0 25px;\n opacity: 0;\n animation: slideUp 0.5s ease 0.3s forwards;\n }\n\n @keyframes slideUp {\n from { transform: translateY(20px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n }\n\n .match-btn {\n background: linear-gradient(135deg, var(--pink-hot), var(--coral));\n color: white;\n border: none;\n padding: 18px 50px;\n border-radius: 30px;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 20px;\n letter-spacing: 2px;\n cursor: pointer;\n opacity: 0;\n animation: slideUp 0.5s ease 0.5s forwards;\n transition: transform 0.2s ease;\n }\n\n .match-btn:hover {\n transform: scale(1.05);\n }\n\n \/* Confetti *\/\n .confetti {\n position: fixed;\n width: 10px;\n height: 10px;\n animation: confettiFall 3s ease-out forwards;\n z-index: 1001;\n }\n\n @keyframes confettiFall {\n 0% {\n transform: translateY(-100px) rotate(0deg);\n opacity: 1;\n }\n 100% {\n transform: translateY(100vh) rotate(720deg);\n opacity: 0;\n }\n }\n\n \/* Responsive adjustments *\/\n @media (max-height: 700px) {\n .card-stack {\n height: 630px;\n }\n .card-image {\n height: 220px;\n }\n }\n\n \/* Mobile touch areas always visible *\/\n @media (max-width: 768px) {\n .carousel-nav {\n opacity: 0.7;\n width: 32px;\n height: 32px;\n font-size: 14px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"hearts-bg\" id=\"heartsBg\"><\/div>\n\n \n <div class=\"match-overlay\" id=\"matchOverlay\">\n <div class=\"match-content\">\n <div class=\"match-hearts\">\ud83d\udc95<\/div>\n <h1 class=\"match-title\">\u00a1IT’S A MATCH!<\/h1>\n <p class=\"match-message\">Urbanista quiere conocerte \ud83d\ude0f<\/p>\n <button class=\"match-btn\" onclick=\"closeMatch()\">VER M\u00c1S DETALLES<\/button>\n <\/div>\n <\/div>\n\n <div class=\"app-container\">\n \n <div class=\"card-stack\" id=\"cardStack\">\n <div class=\"tinder-card\" id=\"tinderCard\">\n <div class=\"card-image\">\n <div class=\"carousel-container\" id=\"carouselContainer\">\n \n <div class=\"carousel-indicators\" id=\"carouselIndicators\"><\/div>\n \n \n <div class=\"carousel-track\" id=\"carouselTrack\">\n \n <\/div>\n \n \n <button class=\"carousel-nav prev\" onclick=\"prevSlide(event)\">\u2039<\/button>\n <button class=\"carousel-nav next\" onclick=\"nextSlide(event)\">\u203a<\/button>\n \n \n <div class=\"carousel-touch-area left\" onclick=\"prevSlide(event)\"><\/div>\n <div class=\"carousel-touch-area right\" onclick=\"nextSlide(event)\"><\/div>\n <\/div>\n <div class=\"card-gradient\"><\/div>\n <span class=\"card-badge\">\ud83d\udd25 NUEVO<\/span>\n <div class=\"match-stamp\">MATCH \ud83d\udc95<\/div>\n <\/div>\n <div class=\"card-content\">\n <div class=\"card-title-row\">\n <h2 class=\"card-title\">Tu Depa Ideal, 25<\/h2>\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2024\/06\/Logo-Negro-Urbanista.png\" alt=\"Urbanista\" class=\"card-logo\">\n <\/div>\n <p class=\"card-subtitle\">\ud83d\udccd A 2km de ti \u2022 CDMX<\/p>\n <div class=\"card-pillars\">\n <div class=\"pillar\">\n <span class=\"pillar-icon\">\ud83c\udfdd\ufe0f<\/span>\n <div class=\"pillar-content\">\n <div class=\"pillar-title\">TU OASIS URBANO<\/div>\n <div class=\"pillar-desc\">A\/C, silencio y seguridad. Vive por encima del ruido.<\/div>\n <\/div>\n <\/div>\n <div class=\"pillar\">\n <span class=\"pillar-icon\">\u2728<\/span>\n <div class=\"pillar-content\">\n <div class=\"pillar-title\">RENTA F\u00c1CIL<\/div>\n <div class=\"pillar-desc\">Sin aval, arreglos r\u00e1pidos, servicios incluidos. Cero drama.<\/div>\n <\/div>\n <\/div>\n <div class=\"pillar\">\n <span class=\"pillar-icon\">\ud83c\udf89<\/span>\n <div class=\"pillar-content\">\n <div class=\"pillar-title\">COMPARTE Y RECARGA<\/div>\n <div class=\"pillar-desc\">Hostea como pro: El spot que tu crush no querr\u00e1 dejar.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"swipe-buttons\">\n <button class=\"swipe-btn btn-super\" onclick=\"superLike()\">\u2b50<\/button>\n <button class=\"swipe-btn btn-like\" onclick=\"swipeRight()\">\u2764\ufe0f<\/button>\n <\/div>\n\n \n <section class=\"content-section\">\n <span class=\"section-emoji\">\ud83d\udc98<\/span>\n <h2 class=\"section-title\">EL MATCH QUE <span>NO PEDISTE<\/span><\/h2>\n <p class=\"section-subtitle\">(El que s\u00ed funciona)<\/p>\n <\/section>\n\n \n <div class=\"form-container\">\n <div class=\"form-header\">\n <h2 class=\"form-title\">\u00bfHACEMOS MATCH?<\/h2>\n <p class=\"form-subtitle\">D\u00e9janos tus datos y encontremos tu depa ideal<\/p>\n <\/div>\n \n <div id=\"hubspotForm\">\n <script charset=\"utf-8\" type=\"text\/javascript\" src=\"\/\/js.hsforms.net\/forms\/embed\/v2.js\"><\/script>\n <script>\n hbspt.forms.create({\n portalId: \"47830887\",\n formId: \"35ec516d-61e9-400f-aea8-d9aa0ab193c8\",\n region: \"na1\"\n });\n <\/script>\n <\/div>\n <\/div>\n\n \n <footer class=\"footer\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2024\/06\/Logo-Negro-Urbanista.png\" alt=\"Urbanista\" class=\"footer-logo-img\">\n <p class=\"footer-text\">El match perfecto para tu nuevo hogar \ud83d\udc95<\/p>\n <\/footer>\n <\/div>\n\n <script>\n \/\/ Carousel Images\n const carouselImages = [\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/cocina-lounge-2-scaled.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/gaming-zone-1-scaled.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/Cocina-lounge-3-scaled.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_aqqz4jaqqz4jaqqz-1.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_kahrtdkahrtdkahr.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/sala-tv-scaled.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/62e4924b-986d-4295-a2da-0c55ea1877b4.jpg',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_qkw57iqkw57iqkw5.png',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2025\/10\/cine-joaquina-del-valle.jpg',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2025\/10\/futbolito-magda.jpg',\n 'https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/01\/gimnasio-scaled.png'\n ];\n\n let currentSlide = 0;\n let carouselInterval;\n let totalSlides = carouselImages.length;\n\n \/\/ Initialize Carousel\n function initCarousel() {\n const track = document.getElementById('carouselTrack');\n const indicators = document.getElementById('carouselIndicators');\n \n track.innerHTML = '';\n indicators.innerHTML = '';\n \n carouselImages.forEach((src, index) => {\n const slide = document.createElement('div');\n slide.className = 'carousel-slide';\n slide.innerHTML = '<img decoding=\"async\" src=\"' + src + '\" alt=\"Departamento ' + (index + 1) + '\" loading=\"lazy\">';\n track.appendChild(slide);\n \n const indicator = document.createElement('div');\n indicator.className = 'carousel-indicator' + (index === 0 ? ' active' : '');\n indicator.onclick = function(e) { goToSlide(index, e); };\n indicators.appendChild(indicator);\n });\n \n updateCarousel();\n startAutoPlay();\n }\n\n function updateCarousel() {\n const track = document.getElementById('carouselTrack');\n const indicators = document.querySelectorAll('.carousel-indicator');\n \n const translateValue = -(currentSlide * 100);\n track.style.transform = 'translateX(' + translateValue + '%)';\n \n indicators.forEach(function(ind, index) {\n ind.classList.toggle('active', index === currentSlide);\n });\n }\n\n function nextSlide(e) {\n if (e) {\n e.stopPropagation();\n e.preventDefault();\n }\n currentSlide = (currentSlide + 1) % totalSlides;\n updateCarousel();\n resetAutoPlay();\n }\n\n function prevSlide(e) {\n if (e) {\n e.stopPropagation();\n e.preventDefault();\n }\n currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;\n updateCarousel();\n resetAutoPlay();\n }\n\n function goToSlide(index, e) {\n if (e) {\n e.stopPropagation();\n e.preventDefault();\n }\n currentSlide = index;\n updateCarousel();\n resetAutoPlay();\n }\n\n function startAutoPlay() {\n carouselInterval = setInterval(function() {\n currentSlide = (currentSlide + 1) % totalSlides;\n updateCarousel();\n }, 4000);\n }\n\n function resetAutoPlay() {\n clearInterval(carouselInterval);\n startAutoPlay();\n }\n\n document.addEventListener('DOMContentLoaded', initCarousel);\n \n if (document.readyState !== 'loading') {\n initCarousel();\n }\n\n \/\/ Create floating hearts\n function createHearts() {\n const container = document.getElementById('heartsBg');\n const hearts = ['\ud83d\udc95', '\ud83d\udc96', '\ud83d\udc97', '\ud83d\udc93', '\ud83d\udc98', '\u2764\ufe0f', '\ud83e\ude77'];\n \n for (let i = 0; i < 15; i++) {\n const heart = document.createElement('div');\n heart.className = 'floating-heart';\n heart.textContent = hearts[Math.floor(Math.random() * hearts.length)];\n heart.style.left = Math.random() * 100 + '%';\n heart.style.animationDelay = Math.random() * 8 + 's';\n heart.style.animationDuration = (8 + Math.random() * 4) + 's';\n container.appendChild(heart);\n }\n }\n createHearts();\n\n \/\/ Tinder card swipe functionality\n const card = document.getElementById('tinderCard');\n let startX, currentX, isDragging = false;\n let isCarouselInteraction = false;\n\n card.addEventListener('touchstart', handleTouchStart, { passive: true });\n card.addEventListener('touchmove', handleTouchMove, { passive: true });\n card.addEventListener('touchend', handleTouchEnd);\n card.addEventListener('mousedown', handleMouseDown);\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n\n function isCarouselElement(target) {\n return target.closest('.carousel-nav') || \n target.closest('.carousel-indicator') || \n target.closest('.carousel-touch-area');\n }\n\n function handleTouchStart(e) {\n if (isCarouselElement(e.target)) {\n isCarouselInteraction = true;\n return;\n }\n isCarouselInteraction = false;\n startX = e.touches[0].clientX;\n isDragging = true;\n }\n\n function handleMouseDown(e) {\n if (isCarouselElement(e.target)) {\n isCarouselInteraction = true;\n return;\n }\n isCarouselInteraction = false;\n startX = e.clientX;\n isDragging = true;\n card.style.cursor = 'grabbing';\n }\n\n function handleTouchMove(e) {\n if (!isDragging || isCarouselInteraction) return;\n currentX = e.touches[0].clientX;\n updateCardPosition();\n }\n\n function handleMouseMove(e) {\n if (!isDragging || isCarouselInteraction) return;\n currentX = e.clientX;\n updateCardPosition();\n }\n\n function updateCardPosition() {\n const diff = currentX - startX;\n const rotation = diff * 0.1;\n card.style.transform = 'translateX(' + diff + 'px) rotate(' + rotation + 'deg)';\n \n if (diff > 50) {\n card.classList.add('show-match');\n } else {\n card.classList.remove('show-match');\n }\n }\n\n function handleTouchEnd() {\n if (isCarouselInteraction) {\n isCarouselInteraction = false;\n return;\n }\n finishSwipe();\n }\n\n function handleMouseUp() {\n if (isCarouselInteraction) {\n isCarouselInteraction = false;\n return;\n }\n if (!isDragging) return;\n card.style.cursor = 'grab';\n finishSwipe();\n }\n\n function finishSwipe() {\n if (!isDragging) return;\n isDragging = false;\n \n const diff = currentX - startX;\n \n if (diff > 100) {\n swipeRight();\n } else {\n card.style.transform = '';\n card.classList.remove('show-match');\n }\n }\n\n function swipeRight() {\n card.classList.add('swiping-right');\n showMatch();\n }\n\n function superLike() {\n card.style.transform = 'scale(1.1)';\n setTimeout(function() {\n card.classList.add('swiping-right');\n showMatch();\n }, 200);\n }\n\n function resetCard() {\n card.classList.remove('swiping-right', 'show-match');\n card.style.transform = '';\n currentSlide = 0;\n updateCarousel();\n }\n\n function showMatch() {\n const overlay = document.getElementById('matchOverlay');\n overlay.classList.add('active');\n createConfetti();\n \n if (navigator.vibrate) {\n navigator.vibrate([100, 50, 100]);\n }\n }\n\n function closeMatch() {\n const overlay = document.getElementById('matchOverlay');\n overlay.classList.remove('active');\n resetCard();\n \n document.querySelector('.form-container').scrollIntoView({ \n behavior: 'smooth',\n block: 'center'\n });\n }\n\n function createConfetti() {\n const colors = ['#FF3366', '#FF6B9D', '#FFB3C6', '#FFD700', '#FF7A5C'];\n \n for (let i = 0; i < 50; i++) {\n const confetti = document.createElement('div');\n confetti.className = 'confetti';\n confetti.style.left = Math.random() * 100 + '%';\n confetti.style.top = '-20px';\n confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n confetti.style.animationDelay = Math.random() * 0.5 + 's';\n confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';\n document.body.appendChild(confetti);\n \n setTimeout(function() { confetti.remove(); }, 3000);\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El Match Que No Pediste \ud83d\udc98 | Urbanista \ud83d\udc95 \u00a1IT’S A MATCH! Urbanista quiere conocerte \ud83d\ude0f VER M\u00c1S DETALLES \u2039 \u203a \ud83d\udd25 NUEVO MATCH \ud83d\udc95 Tu Depa Ideal, 25 \ud83d\udccd A 2km de ti \u2022 CDMX \ud83c\udfdd\ufe0f TU OASIS URBANO A\/C, silencio y seguridad. Vive por encima del ruido. \u2728 RENTA F\u00c1CIL Sin aval, arreglos […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-17222","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/17222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/comments?post=17222"}],"version-history":[{"count":0,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/17222\/revisions"}],"wp:attachment":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/media?parent=17222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}