Calculadora de Renta \u2014 Urbanista<\/title>\n <meta name=\"description\" content=\"Calcula al instante el ingreso necesario para rentar tu departamento en Urbanista con la regla del 3x. Sin aval, sin complicaciones.\" \/>\n <meta property=\"og:title\" content=\"Calculadora de Renta \u2014 Urbanista\" \/>\n <meta property=\"og:description\" content=\"Calcula al instante el ingreso necesario para rentar tu departamento en Urbanista con la regla del 3x.\" \/>\n <meta property=\"og:type\" content=\"website\" \/>\n <link rel=\"icon\" type=\"image\/svg+xml\" href=\"favicon.svg\" \/>\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=Bebas+Neue&family=Outfit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\n <link rel=\"stylesheet\" href=\"styles.css\" \/>\n <\/head>\n <body>\n \n <header class=\"header\">\n <div class=\"container header__inner\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/urbanista-logo.webp\" alt=\"Urbanista\" class=\"header__logo\" \/>\n <a href=\"https:\/\/urbanista.mx\/\" class=\"btn btn--secondary header__cta\">Ver departamentos<\/a>\n <\/div>\n <\/header>\n\n \n <section class=\"hero\">\n <div class=\"hero__bg\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/urbanista-hero.jpg\" alt=\"Vista de la ciudad\" class=\"hero__bg-img\" \/>\n <div class=\"hero__bg-overlay\"><\/div>\n <\/div>\n <div class=\"container hero__grid\">\n <div class=\"hero__copy reveal\">\n <span class=\"badge\">T\u00da VIVES, T\u00da DISFRUTAS<\/span>\n <h1 class=\"hero__title\">DESCUBRE <span class=\"text-primary\">TU PR\u00d3XIMO<\/span> HOGAR.<\/h1>\n <p class=\"hero__lead\">\n Calcula al instante el ingreso necesario para rentar el departamento que quieres, o descubre tu presupuesto m\u00e1ximo seg\u00fan tus ingresos. Sin aval, sin complicaciones.\n <\/p>\n <\/div>\n\n \n <div class=\"hero__sim reveal\">\n <div class=\"sim\">\n \n <div class=\"sim__toggle\">\n <div class=\"sim__toggle-pill\" id=\"togglePill\"><\/div>\n <button type=\"button\" class=\"sim__toggle-btn is-active\" data-mode=\"rent\" id=\"btnRent\">Quiero rentar<\/button>\n <button type=\"button\" class=\"sim__toggle-btn\" data-mode=\"income\" id=\"btnIncome\">Conozco mi ingreso<\/button>\n <\/div>\n\n \n <div class=\"sim__field\">\n <label class=\"sim__label\" id=\"inputLabel\" for=\"amountInput\">\u00bfCu\u00e1nto quieres pagar de renta?<\/label>\n <div class=\"sim__input-wrap\">\n <span class=\"sim__prefix\">$<\/span>\n <input type=\"text\" inputmode=\"numeric\" class=\"sim__input\" id=\"amountInput\" value=\"25,000\" \/>\n <span class=\"sim__suffix\">MXN<\/span>\n <\/div>\n\n <input type=\"range\" class=\"sim__slider\" id=\"amountSlider\" min=\"15000\" max=\"70000\" step=\"1000\" value=\"25000\" \/>\n <div class=\"sim__range-labels\">\n <span id=\"rangeMin\">$15,000<\/span>\n <span id=\"rangeMax\">$70,000<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"sim__result\">\n <div class=\"sim__result-bar\"><\/div>\n <span class=\"sim__result-label\" id=\"resultLabel\">Ingreso neto requerido<\/span>\n <div class=\"sim__result-value\">\n <span class=\"sim__result-amount\" id=\"resultAmount\">$75,000<\/span>\n <span class=\"sim__result-mxn\">MXN<\/span>\n <\/div>\n <p class=\"sim__note\">\n <svg class=\"icon icon--primary\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/><\/svg>\n <span>Por regla financiera, tu ingreso neto debe ser al menos <strong>3 veces<\/strong> el valor de la renta mensual.<\/span>\n <\/p>\n <p class=\"sim__note sim__note--credit\">\n <svg class=\"icon icon--secondary\" viewBox=\"0 0 24 24\"><path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\n <span>Adem\u00e1s de comprobar tus ingresos, evaluamos tu <strong>historial crediticio<\/strong>, el cual influye en tu aprobaci\u00f3n y en el dep\u00f3sito requerido.<\/span>\n <\/p>\n <\/div>\n\n \n <div class=\"sim__deposits\">\n <div>\n <p class=\"sim__deposit-label\">Dep\u00f3sito (Nacional)<\/p>\n <p class=\"sim__deposit-value\" id=\"depositCitizen\">$37,500<\/p>\n <\/div>\n <div>\n <p class=\"sim__deposit-label\">Dep\u00f3sito (Extranjero)<\/p>\n <p class=\"sim__deposit-value\" id=\"depositForeigner\">$50,000<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"rule\">\n <div class=\"container rule__inner\">\n <h2 class=\"rule__title\">LA REGLA DEL 3X<\/h2>\n <p class=\"rule__lead\">\n Para garantizar tu tranquilidad financiera, requerimos que tus ingresos netos comprobables sean equivalentes a 3 veces el valor de la renta mensual. Esta es una pr\u00e1ctica est\u00e1ndar que protege tanto tu econom\u00eda como la nuestra.\n <\/p>\n <div class=\"rule__cards\">\n <div class=\"rule__card reveal\">\n <svg class=\"icon icon--lg icon--primary\" viewBox=\"0 0 24 24\"><path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\n <h3>Sin Aval<\/h3>\n <p>No necesitas buscar a un tercero. Tu comprobante de ingresos de los \u00faltimos 3 meses es suficiente.<\/p>\n <\/div>\n <div class=\"rule__card reveal\">\n <svg class=\"icon icon--lg icon--primary\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n <h3>Respuesta en 24h<\/h3>\n <p>Nuestro proceso de evaluaci\u00f3n es \u00e1gil y digital. Obt\u00e9n tu confirmaci\u00f3n en tiempo r\u00e9cord.<\/p>\n <\/div>\n <div class=\"rule__card reveal\">\n <svg class=\"icon icon--lg icon--primary\" viewBox=\"0 0 24 24\"><circle cx=\"5\" cy=\"9\" r=\"2\"\/><circle cx=\"9.5\" cy=\"5.5\" r=\"2\"\/><circle cx=\"14.5\" cy=\"5.5\" r=\"2\"\/><circle cx=\"19\" cy=\"9\" r=\"2\"\/><path d=\"M12 11c-2.6 0-5 2.1-5 4.6 0 2 1.5 3.1 3.1 3.1.8 0 1.3-.4 1.9-.4s1.1.4 1.9.4c1.6 0 3.1-1.1 3.1-3.1 0-2.5-2.4-4.6-5-4.6z\"\/><\/svg>\n <h3>Pet Friendly<\/h3>\n <p>Tus mascotas son bienvenidas (hasta 25kg) presentando su cartilla de vacunaci\u00f3n.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"reqs\">\n <div class=\"container reqs__grid\">\n <div class=\"reqs__content reveal\">\n <div>\n <h2 class=\"section-title\">QU\u00c9 NECESITAS PARA RENTAR<\/h2>\n <p class=\"reqs__lead\">Un proceso moderno, transparente y 100% digital. Ten estos documentos a la mano para asegurar tu departamento.<\/p>\n <\/div>\n <ul class=\"reqs__list\" id=\"reqsList\"><\/ul>\n <div class=\"reqs__contract\">\n <svg class=\"icon icon--md icon--primary\" viewBox=\"0 0 24 24\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/><line x1=\"10\" y1=\"9\" x2=\"8\" y2=\"9\"\/><\/svg>\n <div>\n <h4>Sobre el contrato<\/h4>\n <p>Plazo m\u00ednimo de 12 meses. El dep\u00f3sito en garant\u00eda es de 1.5 meses para ciudadanos mexicanos y 2 meses para extranjeros (sujeto a revisi\u00f3n legal y crediticia).<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"reqs__img reveal\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/interior.webp\" alt=\"Interior Urbanista\" \/>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"amen\">\n <div class=\"container\">\n <div class=\"amen__head\">\n <h2 class=\"section-title\">VIVE SIN L\u00cdMITES<\/h2>\n <p>M\u00e1s que un departamento, un estilo de vida dise\u00f1ado para profesionales urbanos que valoran su tiempo.<\/p>\n <\/div>\n <div class=\"amen__grid\">\n <article class=\"amen__card\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/gym.webp\" alt=\"Vecinos disfrutando del rooftop con vista a la ciudad\" \/>\n <div class=\"amen__overlay\">\n <h3>ROOFTOP & SKY BAR<\/h3>\n <p>Convive y rel\u00e1jate con vistas panor\u00e1micas de la ciudad.<\/p>\n <\/div>\n <\/article>\n <article class=\"amen__card\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/amenities.webp\" alt=\"Profesionales conviviendo en el lounge y coworking\" \/>\n <div class=\"amen__overlay\">\n <h3>LOUNGES & COWORKING<\/h3>\n <p>Espacios dise\u00f1ados para tu productividad y descanso.<\/p>\n <\/div>\n <\/article>\n <article class=\"amen__card\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/65018c26-bc90-496f-8912-0fb44561f8d0.jpg\" alt=\"Amigos disfrutando una pel\u00edcula en la sala de cine\" \/>\n <div class=\"amen__overlay\">\n <h3>SALA DE CINE<\/h3>\n <p>Noches de pel\u00edcula sin salir de casa.<\/p>\n <\/div>\n <\/article>\n <article class=\"amen__card\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/01fbab74-5ddf-431f-8233-1f03fc5951ba.jpg\" alt=\"Vecinos jugando y conviviendo en la sala de juegos\" \/>\n <div class=\"amen__overlay\">\n <h3>SALA DE JUEGOS<\/h3>\n <p>El lugar ideal para convivir con tu comunidad.<\/p>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"faq\">\n <div class=\"container faq__inner\">\n <div class=\"faq__head\">\n <h2 class=\"section-title\">PREGUNTAS FRECUENTES<\/h2>\n <\/div>\n <div class=\"faq__list\" id=\"faqList\"><\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"cta\">\n <div class=\"cta__grid-pattern\"><\/div>\n <div class=\"container cta__inner\">\n <h2 class=\"cta__title\">TU NUEVO HOGAR<br \/>TE ESPERA<\/h2>\n <p class=\"cta__lead\">Agenda una visita hoy mismo y descubre por qu\u00e9 somos la opci\u00f3n favorita de los profesionales en CDMX.<\/p>\n <a href=\"https:\/\/urbanista.mx\/\" class=\"btn btn--primary btn--lg\">\n Explorar departamentos\n <svg class=\"icon\" viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/a>\n <\/div>\n <\/section>\n\n \n <footer class=\"footer\">\n <div class=\"container footer__inner\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/urbanista-logo.webp\" alt=\"Urbanista\" class=\"footer__logo\" \/>\n <p id=\"footerCopy\">\u00a9 2026 Urbanista. Todos los derechos reservados.<\/p>\n <\/div>\n <\/footer>\n\n <script src=\"script.js\"><\/script>\n <\/body>\n<\/html>\n\n<style> \n\/* ===== Tema Urbanista ===== *\/\n:root {\n --primary: #00b4d8; \/* cian *\/\n --primary-90: #00a2c2;\n --secondary: #004e64; \/* teal profundo *\/\n --secondary-90: #014457;\n --background: #fafafa;\n --foreground: #004e64;\n --muted: #edeff2;\n --muted-fg: #69727d;\n --accent: #d3f6ff; \/* cian muy claro *\/\n --border: #e2e5e9;\n --white: #ffffff;\n --radius: 0.75rem;\n\n --font-sans: \"Outfit\", system-ui, sans-serif;\n --font-display: \"Bebas Neue\", sans-serif;\n}\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\nhtml { scroll-behavior: smooth; }\n\nbody {\n font-family: var(--font-sans);\n background: var(--background);\n color: var(--foreground);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n overflow-x: hidden;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-family: var(--font-display);\n letter-spacing: 0.05em;\n font-weight: 400;\n}\n\n::selection { background: rgba(0, 180, 216, 0.2); color: var(--secondary); }\n\nimg { display: block; max-width: 100%; }\n\na { text-decoration: none; }\n\n.container {\n width: 100%;\n max-width: 1480px;\n margin: 0 auto;\n padding: 0 1rem;\n}\n\n.text-primary { color: var(--primary); }\n\n\/* ===== Iconos ===== *\/\n.icon {\n width: 1.25rem;\n height: 1.25rem;\n stroke: currentColor;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n flex-shrink: 0;\n}\n.icon--md { width: 1.5rem; height: 1.5rem; }\n.icon--lg { width: 2rem; height: 2rem; }\n.icon--primary { color: var(--primary); }\n.icon--secondary { color: var(--secondary); }\n\/* paw fill *\/\n.rule__card .icon circle[r=\"2\"] { fill: currentColor; stroke: none; }\n\n\/* ===== Botones ===== *\/\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n font-weight: 600;\n letter-spacing: 0.03em;\n border: none;\n cursor: pointer;\n border-radius: 9999px;\n padding: 0.7rem 1.5rem;\n font-size: 0.95rem;\n transition: background 0.2s, transform 0.2s;\n font-family: var(--font-sans);\n}\n.btn--secondary { background: var(--secondary); color: var(--white); }\n.btn--secondary:hover { background: var(--secondary-90); }\n.btn--primary { background: var(--primary); color: var(--white); }\n.btn--primary:hover { background: var(--primary-90); }\n.btn--lg { height: 4rem; padding: 0 2.5rem; font-size: 1.125rem; }\n.btn--lg .icon { transition: transform 0.2s; }\n.btn--lg:hover .icon { transform: translateX(4px); }\n\n.badge {\n display: inline-block;\n padding: 0.25rem 0.75rem;\n border-radius: 9999px;\n background: var(--accent);\n color: var(--secondary);\n font-size: 0.875rem;\n font-weight: 600;\n letter-spacing: 0.08em;\n margin-bottom: 1rem;\n}\n\n.section-title {\n font-size: clamp(2.75rem, 6vw, 3.75rem);\n color: var(--secondary);\n line-height: 1;\n margin-bottom: 1rem;\n}\n\n\/* ===== Header ===== *\/\n.header {\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 50;\n background: rgba(255, 255, 255, 0.8);\n backdrop-filter: blur(12px);\n border-bottom: 1px solid rgba(226, 229, 233, 0.5);\n}\n.header__inner {\n height: 5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.header__logo { height: 2rem; object-fit: contain; }\n\n\/* ===== Hero ===== *\/\n.hero {\n position: relative;\n padding: 6.5rem 0 3rem;\n overflow: hidden;\n}\n.hero__bg { position: absolute; inset: 0; z-index: 0; }\n.hero__bg-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.1; }\n.hero__bg-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(to bottom, rgba(250,250,250,0.9), rgba(250,250,250,0.95) 50%, var(--background));\n}\n.hero__grid {\n position: relative;\n z-index: 10;\n display: grid;\n grid-template-columns: 1fr;\n gap: 2.5rem;\n align-items: center;\n}\n.hero__copy { max-width: 36rem; }\n.hero__title {\n font-size: clamp(3.5rem, 9vw, 6rem);\n color: var(--secondary);\n line-height: 0.85;\n margin-bottom: 1.25rem;\n}\n.hero__lead {\n font-size: 1.125rem;\n color: var(--muted-fg);\n line-height: 1.7;\n margin-bottom: 0;\n}\n\n\/* ===== Simulador ===== *\/\n.hero__sim { width: 100%; }\n.sim {\n width: 100%;\n max-width: 36rem;\n margin: 0 auto;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(4px);\n border-radius: 1rem;\n box-shadow: 0 25px 50px -12px rgba(0, 78, 100, 0.25);\n padding: 1.75rem;\n}\n@media (min-width: 640px) { .sim { padding: 2rem; } }\n\n.sim__toggle {\n position: relative;\n display: flex;\n background: var(--muted);\n padding: 0.25rem;\n border-radius: 0.75rem;\n margin-bottom: 1.5rem;\n}\n.sim__toggle-pill {\n position: absolute;\n top: 0.25rem;\n bottom: 0.25rem;\n left: 0;\n width: calc(50% - 0.25rem);\n background: var(--white);\n border-radius: 0.5rem;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n transform: translateX(4px);\n transition: transform 0.3s ease;\n}\n.sim__toggle-pill.is-income { transform: translateX(calc(100% + 4px)); }\n.sim__toggle-btn {\n flex: 1;\n position: relative;\n z-index: 1;\n padding: 0.75rem;\n font-size: 0.875rem;\n font-weight: 600;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--muted-fg);\n transition: color 0.2s;\n font-family: var(--font-sans);\n}\n.sim__toggle-btn.is-active { color: var(--secondary); }\n\n.sim__field { margin-bottom: 1.25rem; }\n.sim__label {\n display: block;\n font-size: 1rem;\n color: var(--secondary);\n font-weight: 500;\n margin-bottom: 0.75rem;\n}\n.sim__input-wrap { position: relative; display: flex; align-items: center; }\n.sim__prefix {\n position: absolute; left: 0;\n font-size: 1.5rem; color: var(--secondary);\n font-family: var(--font-display);\n}\n.sim__suffix {\n position: absolute; right: 0;\n font-size: 1.125rem; color: var(--muted-fg);\n font-family: var(--font-display);\n}\n.sim__input {\n width: 100%;\n padding: 0 4rem 0 1.75rem;\n height: 3.5rem;\n font-size: clamp(1.875rem, 5vw, 2.25rem);\n font-family: var(--font-display);\n color: var(--secondary);\n letter-spacing: 0.05em;\n background: transparent;\n border: none;\n border-bottom: 2px solid var(--border);\n outline: none;\n transition: border-color 0.2s;\n}\n.sim__input:focus { border-bottom-color: var(--primary); }\n\n.sim__slider {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 6px;\n border-radius: 9999px;\n margin: 1.25rem 0 0.5rem;\n background: var(--muted);\n outline: none;\n cursor: pointer;\n}\n.sim__slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px; height: 20px;\n border-radius: 50%;\n background: var(--white);\n border: 2px solid var(--primary);\n box-shadow: 0 1px 4px rgba(0,0,0,0.2);\n cursor: pointer;\n}\n.sim__slider::-moz-range-thumb {\n width: 20px; height: 20px;\n border-radius: 50%;\n background: var(--white);\n border: 2px solid var(--primary);\n box-shadow: 0 1px 4px rgba(0,0,0,0.2);\n cursor: pointer;\n}\n.sim__range-labels {\n display: flex;\n justify-content: space-between;\n font-size: 0.75rem;\n color: var(--muted-fg);\n}\n\n.sim__result {\n position: relative;\n margin-top: 1.75rem;\n padding: 1.5rem;\n background: rgba(211, 246, 255, 0.3);\n border: 1px solid rgba(211, 246, 255, 0.6);\n border-radius: 1rem;\n overflow: hidden;\n}\n@media (min-width: 640px) { .sim__result { padding: 1.75rem; } }\n.sim__result-bar {\n position: absolute; top: 0; left: 0;\n width: 4px; height: 100%;\n background: var(--primary);\n}\n.sim__result-label {\n display: block;\n font-size: 0.875rem;\n color: rgba(0, 78, 100, 0.8);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n margin-bottom: 0.5rem;\n}\n.sim__result-value {\n display: flex;\n align-items: baseline;\n gap: 0.5rem;\n margin-bottom: 0.75rem;\n}\n.sim__result-amount {\n font-size: clamp(3rem, 9vw, 3.75rem);\n font-family: var(--font-display);\n color: var(--primary);\n letter-spacing: 0.03em;\n line-height: 1;\n}\n.sim__result-mxn { font-size: 1.125rem; color: var(--secondary); font-family: var(--font-display); }\n\n.sim__note {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.875rem;\n color: var(--muted-fg);\n line-height: 1.6;\n}\n.sim__note .icon { width: 1rem; height: 1rem; margin-top: 0.15rem; }\n.sim__note strong { color: var(--secondary); }\n.sim__note--credit {\n font-size: 0.78rem;\n margin-top: 0.75rem;\n padding-top: 0.75rem;\n border-top: 1px solid rgba(211, 246, 255, 0.8);\n}\n\n.sim__deposits {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n margin-top: 1.25rem;\n padding-top: 1.25rem;\n border-top: 1px solid var(--border);\n}\n.sim__deposit-label { font-size: 0.75rem; color: var(--muted-fg); margin-bottom: 0.25rem; }\n.sim__deposit-value { font-weight: 600; color: var(--secondary); }\n\n\/* ===== Regla 3x ===== *\/\n.rule { padding: 3.5rem 0; background: var(--secondary); color: var(--white); }\n.rule__inner { max-width: 64rem; margin: 0 auto; text-align: center; }\n.rule__title { font-size: clamp(2.75rem, 6vw, 3.75rem); margin-bottom: 1rem; }\n.rule__lead { font-size: 1.125rem; color: rgba(255,255,255,0.8); line-height: 1.7; margin-bottom: 2rem; }\n.rule__cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; text-align: left; }\n.rule__card {\n padding: 1.5rem;\n border-radius: 1rem;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.1);\n}\n.rule__card .icon { margin-bottom: 0.75rem; }\n.rule__card h3 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; margin-bottom: 0.5rem; }\n.rule__card p { font-size: 0.875rem; color: rgba(255,255,255,0.7); }\n\n\/* ===== Requisitos ===== *\/\n.reqs { padding: 4rem 0; background: rgba(211, 246, 255, 0.2); }\n.reqs__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }\n.reqs__content { display: flex; flex-direction: column; gap: 1.5rem; }\n.reqs__lead { color: var(--muted-fg); font-size: 1.125rem; }\n.reqs__list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }\n.reqs__list li {\n display: flex;\n align-items: center;\n gap: 1rem;\n background: var(--white);\n padding: 1rem;\n border-radius: 0.75rem;\n box-shadow: 0 1px 3px rgba(0,0,0,0.06);\n border: 1px solid var(--border);\n}\n.reqs__check {\n width: 2rem; height: 2rem;\n border-radius: 50%;\n background: rgba(0,180,216,0.1);\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n}\n.reqs__check .icon { width: 1rem; height: 1rem; }\n.reqs__list span { font-weight: 500; color: var(--secondary); }\n.reqs__contract {\n background: rgba(0,180,216,0.05);\n border: 1px solid rgba(0,180,216,0.2);\n border-radius: 0.75rem;\n padding: 1.5rem;\n display: flex;\n gap: 1rem;\n align-items: flex-start;\n}\n.reqs__contract h4 { font-family: var(--font-sans); font-weight: 600; color: var(--secondary); margin-bottom: 0.25rem; letter-spacing: 0; }\n.reqs__contract p { font-size: 0.875rem; color: var(--muted-fg); }\n.reqs__img {\n max-height: 85vh;\n border-radius: 1.5rem;\n overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0, 78, 100, 0.25);\n}\n.reqs__img img { width: 100%; height: 100%; max-height: 85vh; object-fit: cover; }\n\n\/* ===== Amenidades ===== *\/\n.amen { padding: 4rem 0; background: var(--background); }\n.amen__head { text-align: center; max-width: 42rem; margin: 0 auto 2.5rem; }\n.amen__head p { color: var(--muted-fg); font-size: 1.125rem; }\n.amen__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }\n.amen__card {\n position: relative;\n aspect-ratio: 16\/10;\n border-radius: 1rem;\n overflow: hidden;\n}\n.amen__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }\n.amen__card:hover img { transform: scale(1.05); }\n.amen__overlay {\n position: absolute; inset: 0;\n background: linear-gradient(to top, rgba(0,78,100,0.8), transparent);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 2rem;\n}\n.amen__overlay h3 { font-size: 1.875rem; color: var(--white); margin-bottom: 0.5rem; }\n.amen__overlay p { color: rgba(255,255,255,0.8); }\n\n\/* ===== FAQ ===== *\/\n.faq { padding: 4rem 0; background: rgba(237, 239, 242, 0.5); border-top: 1px solid var(--border); }\n.faq__inner { max-width: 64rem; margin: 0 auto; }\n.faq__head { text-align: center; margin-bottom: 2rem; }\n.faq__list {\n background: var(--white);\n border-radius: 1rem;\n box-shadow: 0 1px 3px rgba(0,0,0,0.06);\n border: 1px solid var(--border);\n padding: 0.5rem;\n}\n.faq__item { border-bottom: 1px solid var(--border); }\n.faq__item:last-child { border-bottom: none; }\n.faq__q {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n text-align: left;\n padding: 1.25rem 1rem;\n background: none;\n border: none;\n cursor: pointer;\n font-family: var(--font-sans);\n font-weight: 600;\n font-size: 1rem;\n color: var(--secondary);\n transition: color 0.2s;\n}\n.faq__q:hover { color: var(--primary); }\n.faq__q .icon { transition: transform 0.3s; }\n.faq__item.is-open .faq__q .icon { transform: rotate(180deg); }\n.faq__a {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n}\n.faq__a-inner { padding: 0 1rem 1.25rem; color: var(--muted-fg); line-height: 1.7; }\n\n\/* ===== CTA ===== *\/\n.cta { position: relative; padding: 4.5rem 0; background: var(--secondary); overflow: hidden; }\n.cta__grid-pattern {\n position: absolute; inset: 0;\n background-image:\n linear-gradient(to right, rgba(0,180,216,0.08) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(0,180,216,0.08) 1px, transparent 1px);\n background-size: 4rem 4rem;\n}\n.cta__inner { position: relative; z-index: 10; text-align: center; }\n.cta__title { font-size: clamp(3.5rem, 10vw, 6rem); color: var(--white); margin-bottom: 1.25rem; line-height: 0.9; }\n.cta__lead { font-size: 1.25rem; color: rgba(255,255,255,0.8); max-width: 42rem; margin: 0 auto 2rem; }\n\n\/* ===== Footer ===== *\/\n.footer { background: var(--background); padding: 2.5rem 0; border-top: 1px solid var(--border); }\n.footer__inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: 1.5rem;\n}\n.footer__logo { height: 2rem; object-fit: contain; opacity: 0.5; filter: grayscale(1); }\n.footer p { font-size: 0.875rem; color: var(--muted-fg); }\n\n\/* ===== Animaciones de aparici\u00f3n ===== *\/\n.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }\n.reveal.is-visible { opacity: 1; transform: translateY(0); }\n\n\/* ===== Responsive ===== *\/\n@media (min-width: 768px) {\n .rule__cards { grid-template-columns: repeat(3, 1fr); }\n .amen__grid { grid-template-columns: 1fr 1fr; }\n .header__cta { display: inline-flex; }\n .footer__inner { flex-direction: row; }\n}\n@media (max-width: 767px) {\n .header__cta { display: none; }\n}\n@media (min-width: 1024px) {\n .hero { padding: 8rem 0 4rem; }\n .hero__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }\n .hero__sim { justify-self: end; }\n .reqs__grid { grid-template-columns: 1fr 1fr; }\n}\n\n<\/style>\n\n<script> \n(function () {\n \"use strict\";\n\n var RENT_MIN = 15000;\n var RENT_MAX = 70000;\n var INCOME_MIN = RENT_MIN * 3;\n var INCOME_MAX = RENT_MAX * 3;\n var RENT_DEFAULT = 25000;\n var INCOME_DEFAULT = RENT_DEFAULT * 3;\n\n var mode = \"rent\";\n var amount = RENT_DEFAULT;\n\n var pill = document.getElementById(\"togglePill\");\n var btnRent = document.getElementById(\"btnRent\");\n var btnIncome = document.getElementById(\"btnIncome\");\n var inputLabel = document.getElementById(\"inputLabel\");\n var input = document.getElementById(\"amountInput\");\n var slider = document.getElementById(\"amountSlider\");\n var rangeMin = document.getElementById(\"rangeMin\");\n var rangeMax = document.getElementById(\"rangeMax\");\n var resultLabel = document.getElementById(\"resultLabel\");\n var resultAmount = document.getElementById(\"resultAmount\");\n var depositCitizen = document.getElementById(\"depositCitizen\");\n var depositForeigner = document.getElementById(\"depositForeigner\");\n\n function formatCurrency(val) {\n return new Intl.NumberFormat(\"es-MX\", {\n style: \"currency\",\n currency: \"MXN\",\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }).format(val);\n }\n function formatThousands(val) {\n return val === 0 ? \"\" : val.toLocaleString(\"en-US\");\n }\n\n function getRange() {\n return mode === \"rent\"\n ? { min: RENT_MIN, max: RENT_MAX, step: 1000 }\n : { min: INCOME_MIN, max: INCOME_MAX, step: 3000 };\n }\n\n function render() {\n var r = getRange();\n var effective = Math.min(Math.max(amount, r.min), r.max);\n\n inputLabel.textContent =\n mode === \"rent\" ? \"\u00bfCu\u00e1nto quieres pagar de renta?\" : \"\u00bfCu\u00e1l es tu ingreso neto mensual?\";\n resultLabel.textContent =\n mode === \"rent\" ? \"Ingreso neto requerido\" : \"Renta m\u00e1xima recomendada\";\n\n slider.min = r.min;\n slider.max = r.max;\n slider.step = r.step;\n slider.value = effective;\n rangeMin.textContent = formatCurrency(r.min);\n rangeMax.textContent = formatCurrency(r.max);\n updateSliderFill(effective, r.min, r.max);\n\n var requiredIncome = mode === \"rent\" ? effective * 3 : 0;\n var maxRent = mode === \"income\" ? Math.floor(effective \/ 3) : 0;\n resultAmount.textContent = formatCurrency(mode === \"rent\" ? requiredIncome : maxRent);\n\n var base = mode === \"rent\" ? effective : maxRent;\n depositCitizen.textContent = formatCurrency(base * 1.5);\n depositForeigner.textContent = formatCurrency(base * 2);\n }\n\n function updateSliderFill(val, min, max) {\n var pct = ((val - min) \/ (max - min)) * 100;\n slider.style.background =\n \"linear-gradient(to right, var(--primary) 0%, var(--primary) \" +\n pct +\n \"%, var(--muted) \" +\n pct +\n \"%, var(--muted) 100%)\";\n }\n\n function setMode(newMode) {\n if (mode === newMode) return;\n mode = newMode;\n amount = mode === \"rent\" ? RENT_DEFAULT : INCOME_DEFAULT;\n pill.classList.toggle(\"is-income\", mode === \"income\");\n btnRent.classList.toggle(\"is-active\", mode === \"rent\");\n btnIncome.classList.toggle(\"is-active\", mode === \"income\");\n input.value = formatThousands(amount);\n render();\n }\n\n btnRent.addEventListener(\"click\", function () { setMode(\"rent\"); });\n btnIncome.addEventListener(\"click\", function () { setMode(\"income\"); });\n\n input.addEventListener(\"input\", function () {\n var digits = input.value.replace(\/[^0-9]\/g, \"\");\n amount = Number(digits || 0);\n input.value = formatThousands(amount);\n render();\n });\n\n input.addEventListener(\"blur\", function () {\n var r = getRange();\n amount = Math.min(Math.max(amount, r.min), r.max);\n input.value = formatThousands(amount);\n render();\n });\n\n slider.addEventListener(\"input\", function () {\n amount = Number(slider.value);\n input.value = formatThousands(amount);\n render();\n });\n\n var requirements = [\n \"Identificaci\u00f3n oficial vigente\",\n \"Comprobante de ingresos netos (\u00faltimos 3 meses)\",\n \"Constancia de Situaci\u00f3n Fiscal actualizada\",\n \"Comprobante de domicilio (no mayor a 3 meses)\",\n ];\n var checkSvg =\n '<svg class=\"icon\" viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>';\n var reqsList = document.getElementById(\"reqsList\");\n reqsList.innerHTML = requirements\n .map(function (item) {\n return (\n '<li><span class=\"reqs__check icon--primary\">' +\n checkSvg +\n \"<\/span><span>\" +\n item +\n \"<\/span><\/li>\"\n );\n })\n .join(\"\");\n\n var faqs = [\n {\n q: \"\u00bfRealmente no necesito aval?\",\n a: \"Es correcto. En Urbanista confiamos en tu historial financiero. Si puedes comprobar ingresos netos mensuales de al menos 3 veces el valor de la renta durante los \u00faltimos 3 meses, no requieres presentar aval ni fiador.\",\n },\n {\n q: \"\u00bfCu\u00e1l es el plazo m\u00ednimo de renta?\",\n a: \"Nuestros contratos est\u00e1n dise\u00f1ados para brindar estabilidad, por lo que el plazo m\u00ednimo de arrendamiento es de 12 meses.\",\n },\n {\n q: \"\u00bfDe cu\u00e1nto es el dep\u00f3sito en garant\u00eda?\",\n a: \"El dep\u00f3sito est\u00e1ndar es equivalente a 1.5 meses de renta para ciudadanos mexicanos. Para extranjeros, solicitamos 2 meses de renta. Ambos casos est\u00e1n sujetos a una evaluaci\u00f3n crediticia y legal est\u00e1ndar.\",\n },\n {\n q: \"\u00bfAceptan mascotas?\",\n a: \"\u00a1S\u00ed! Somos una comunidad pet-friendly. Aceptamos mascotas de hasta 25 kg. \u00danicamente te pediremos presentar su cartilla de vacunaci\u00f3n actualizada para el expediente.\",\n },\n ];\n var chevron =\n '<svg class=\"icon\" viewBox=\"0 0 24 24\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>';\n var faqList = document.getElementById(\"faqList\");\n faqList.innerHTML = faqs\n .map(function (f, i) {\n var qId = \"faq-q-\" + i;\n var aId = \"faq-a-\" + i;\n return (\n '<div class=\"faq__item\">' +\n '<button type=\"button\" class=\"faq__q\" id=\"' + qId + '\" aria-expanded=\"false\" aria-controls=\"' + aId + '\"><span>' +\n f.q +\n \"<\/span>\" +\n chevron +\n \"<\/button>\" +\n '<div class=\"faq__a\" id=\"' + aId + '\" role=\"region\" aria-labelledby=\"' + qId + '\"><div class=\"faq__a-inner\">' +\n f.a +\n \"<\/div><\/div><\/div>\"\n );\n })\n .join(\"\");\n\n faqList.querySelectorAll(\".faq__q\").forEach(function (btn) {\n btn.addEventListener(\"click\", function () {\n var item = btn.parentElement;\n var panel = item.querySelector(\".faq__a\");\n var isOpen = item.classList.contains(\"is-open\");\n faqList.querySelectorAll(\".faq__item\").forEach(function (it) {\n it.classList.remove(\"is-open\");\n it.querySelector(\".faq__a\").style.maxHeight = null;\n it.querySelector(\".faq__q\").setAttribute(\"aria-expanded\", \"false\");\n });\n if (!isOpen) {\n item.classList.add(\"is-open\");\n panel.style.maxHeight = panel.scrollHeight + \"px\";\n btn.setAttribute(\"aria-expanded\", \"true\");\n }\n });\n });\n\n document.getElementById(\"footerCopy\").textContent =\n \"\u00a9 \" + new Date().getFullYear() + \" Urbanista. Todos los derechos reservados.\";\n\n var revealEls = document.querySelectorAll(\".reveal\");\n if (\"IntersectionObserver\" in window) {\n var observer = new IntersectionObserver(\n function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add(\"is-visible\");\n observer.unobserve(entry.target);\n }\n });\n },\n { threshold: 0.15, rootMargin: \"-50px\" }\n );\n revealEls.forEach(function (el) { observer.observe(el); });\n } else {\n revealEls.forEach(function (el) { el.classList.add(\"is-visible\"); });\n }\n\n render();\n})();\n\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Calculadora de Renta \u2014 Urbanista Ver departamentos T\u00da VIVES, T\u00da DISFRUTAS DESCUBRE TU PR\u00d3XIMO HOGAR. Calcula al instante el ingreso necesario para rentar el departamento que quieres, o descubre tu presupuesto m\u00e1ximo seg\u00fan tus ingresos. Sin aval, sin complicaciones. Quiero rentar Conozco mi ingreso \u00bfCu\u00e1nto quieres pagar de renta? $ MXN $15,000 $70,000 Ingreso neto […]<\/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-25023","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/25023","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=25023"}],"version-history":[{"count":9,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/25023\/revisions"}],"predecessor-version":[{"id":25071,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/25023\/revisions\/25071"}],"wp:attachment":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/media?parent=25023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":25023,"date":"2026-06-12T09:19:17","date_gmt":"2026-06-12T15:19:17","guid":{"rendered":"https:\/\/urbanista.mx\/?page_id=25023"},"modified":"2026-06-17T14:12:25","modified_gmt":"2026-06-17T20:12:25","slug":"calculadora-urbanista","status":"publish","type":"page","link":"https:\/\/urbanista.mx\/en\/calculadora-urbanista\/","title":{"rendered":"Calculadora Urbanista"},"content":{"rendered":"\n\n\n \n \n \n Calculadora de Renta \u2014 Urbanista<\/title>\n <meta name=\"description\" content=\"Calcula al instante el ingreso necesario para rentar tu departamento en Urbanista con la regla del 3x. Sin aval, sin complicaciones.\" \/>\n <meta property=\"og:title\" content=\"Calculadora de Renta \u2014 Urbanista\" \/>\n <meta property=\"og:description\" content=\"Calcula al instante el ingreso necesario para rentar tu departamento en Urbanista con la regla del 3x.\" \/>\n <meta property=\"og:type\" content=\"website\" \/>\n <link rel=\"icon\" type=\"image\/svg+xml\" href=\"favicon.svg\" \/>\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=Bebas+Neue&family=Outfit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\n <link rel=\"stylesheet\" href=\"styles.css\" \/>\n <\/head>\n <body>\n \n <header class=\"header\">\n <div class=\"container header__inner\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/urbanista-logo.webp\" alt=\"Urbanista\" class=\"header__logo\" \/>\n <a href=\"https:\/\/urbanista.mx\/\" class=\"btn btn--secondary header__cta\">Ver departamentos<\/a>\n <\/div>\n <\/header>\n\n \n <section class=\"hero\">\n <div class=\"hero__bg\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/urbanista-hero.jpg\" alt=\"Vista de la ciudad\" class=\"hero__bg-img\" \/>\n <div class=\"hero__bg-overlay\"><\/div>\n <\/div>\n <div class=\"container hero__grid\">\n <div class=\"hero__copy reveal\">\n <span class=\"badge\">T\u00da VIVES, T\u00da DISFRUTAS<\/span>\n <h1 class=\"hero__title\">DESCUBRE <span class=\"text-primary\">TU PR\u00d3XIMO<\/span> HOGAR.<\/h1>\n <p class=\"hero__lead\">\n Calcula al instante el ingreso necesario para rentar el departamento que quieres, o descubre tu presupuesto m\u00e1ximo seg\u00fan tus ingresos. Sin aval, sin complicaciones.\n <\/p>\n <\/div>\n\n \n <div class=\"hero__sim reveal\">\n <div class=\"sim\">\n \n <div class=\"sim__toggle\">\n <div class=\"sim__toggle-pill\" id=\"togglePill\"><\/div>\n <button type=\"button\" class=\"sim__toggle-btn is-active\" data-mode=\"rent\" id=\"btnRent\">Quiero rentar<\/button>\n <button type=\"button\" class=\"sim__toggle-btn\" data-mode=\"income\" id=\"btnIncome\">Conozco mi ingreso<\/button>\n <\/div>\n\n \n <div class=\"sim__field\">\n <label class=\"sim__label\" id=\"inputLabel\" for=\"amountInput\">\u00bfCu\u00e1nto quieres pagar de renta?<\/label>\n <div class=\"sim__input-wrap\">\n <span class=\"sim__prefix\">$<\/span>\n <input type=\"text\" inputmode=\"numeric\" class=\"sim__input\" id=\"amountInput\" value=\"25,000\" \/>\n <span class=\"sim__suffix\">MXN<\/span>\n <\/div>\n\n <input type=\"range\" class=\"sim__slider\" id=\"amountSlider\" min=\"15000\" max=\"70000\" step=\"1000\" value=\"25000\" \/>\n <div class=\"sim__range-labels\">\n <span id=\"rangeMin\">$15,000<\/span>\n <span id=\"rangeMax\">$70,000<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"sim__result\">\n <div class=\"sim__result-bar\"><\/div>\n <span class=\"sim__result-label\" id=\"resultLabel\">Ingreso neto requerido<\/span>\n <div class=\"sim__result-value\">\n <span class=\"sim__result-amount\" id=\"resultAmount\">$75,000<\/span>\n <span class=\"sim__result-mxn\">MXN<\/span>\n <\/div>\n <p class=\"sim__note\">\n <svg class=\"icon icon--primary\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/><\/svg>\n <span>Por regla financiera, tu ingreso neto debe ser al menos <strong>3 veces<\/strong> el valor de la renta mensual.<\/span>\n <\/p>\n <p class=\"sim__note sim__note--credit\">\n <svg class=\"icon icon--secondary\" viewBox=\"0 0 24 24\"><path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\n <span>Adem\u00e1s de comprobar tus ingresos, evaluamos tu <strong>historial crediticio<\/strong>, el cual influye en tu aprobaci\u00f3n y en el dep\u00f3sito requerido.<\/span>\n <\/p>\n <\/div>\n\n \n <div class=\"sim__deposits\">\n <div>\n <p class=\"sim__deposit-label\">Dep\u00f3sito (Nacional)<\/p>\n <p class=\"sim__deposit-value\" id=\"depositCitizen\">$37,500<\/p>\n <\/div>\n <div>\n <p class=\"sim__deposit-label\">Dep\u00f3sito (Extranjero)<\/p>\n <p class=\"sim__deposit-value\" id=\"depositForeigner\">$50,000<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"rule\">\n <div class=\"container rule__inner\">\n <h2 class=\"rule__title\">LA REGLA DEL 3X<\/h2>\n <p class=\"rule__lead\">\n Para garantizar tu tranquilidad financiera, requerimos que tus ingresos netos comprobables sean equivalentes a 3 veces el valor de la renta mensual. Esta es una pr\u00e1ctica est\u00e1ndar que protege tanto tu econom\u00eda como la nuestra.\n <\/p>\n <div class=\"rule__cards\">\n <div class=\"rule__card reveal\">\n <svg class=\"icon icon--lg icon--primary\" viewBox=\"0 0 24 24\"><path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\n <h3>Sin Aval<\/h3>\n <p>No necesitas buscar a un tercero. Tu comprobante de ingresos de los \u00faltimos 3 meses es suficiente.<\/p>\n <\/div>\n <div class=\"rule__card reveal\">\n <svg class=\"icon icon--lg icon--primary\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n <h3>Respuesta en 24h<\/h3>\n <p>Nuestro proceso de evaluaci\u00f3n es \u00e1gil y digital. Obt\u00e9n tu confirmaci\u00f3n en tiempo r\u00e9cord.<\/p>\n <\/div>\n <div class=\"rule__card reveal\">\n <svg class=\"icon icon--lg icon--primary\" viewBox=\"0 0 24 24\"><circle cx=\"5\" cy=\"9\" r=\"2\"\/><circle cx=\"9.5\" cy=\"5.5\" r=\"2\"\/><circle cx=\"14.5\" cy=\"5.5\" r=\"2\"\/><circle cx=\"19\" cy=\"9\" r=\"2\"\/><path d=\"M12 11c-2.6 0-5 2.1-5 4.6 0 2 1.5 3.1 3.1 3.1.8 0 1.3-.4 1.9-.4s1.1.4 1.9.4c1.6 0 3.1-1.1 3.1-3.1 0-2.5-2.4-4.6-5-4.6z\"\/><\/svg>\n <h3>Pet Friendly<\/h3>\n <p>Tus mascotas son bienvenidas (hasta 25kg) presentando su cartilla de vacunaci\u00f3n.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"reqs\">\n <div class=\"container reqs__grid\">\n <div class=\"reqs__content reveal\">\n <div>\n <h2 class=\"section-title\">QU\u00c9 NECESITAS PARA RENTAR<\/h2>\n <p class=\"reqs__lead\">Un proceso moderno, transparente y 100% digital. Ten estos documentos a la mano para asegurar tu departamento.<\/p>\n <\/div>\n <ul class=\"reqs__list\" id=\"reqsList\"><\/ul>\n <div class=\"reqs__contract\">\n <svg class=\"icon icon--md icon--primary\" viewBox=\"0 0 24 24\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/><line x1=\"10\" y1=\"9\" x2=\"8\" y2=\"9\"\/><\/svg>\n <div>\n <h4>Sobre el contrato<\/h4>\n <p>Plazo m\u00ednimo de 12 meses. El dep\u00f3sito en garant\u00eda es de 1.5 meses para ciudadanos mexicanos y 2 meses para extranjeros (sujeto a revisi\u00f3n legal y crediticia).<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"reqs__img reveal\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/interior.webp\" alt=\"Interior Urbanista\" \/>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"amen\">\n <div class=\"container\">\n <div class=\"amen__head\">\n <h2 class=\"section-title\">VIVE SIN L\u00cdMITES<\/h2>\n <p>M\u00e1s que un departamento, un estilo de vida dise\u00f1ado para profesionales urbanos que valoran su tiempo.<\/p>\n <\/div>\n <div class=\"amen__grid\">\n <article class=\"amen__card\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/gym.webp\" alt=\"Vecinos disfrutando del rooftop con vista a la ciudad\" \/>\n <div class=\"amen__overlay\">\n <h3>ROOFTOP & SKY BAR<\/h3>\n <p>Convive y rel\u00e1jate con vistas panor\u00e1micas de la ciudad.<\/p>\n <\/div>\n <\/article>\n <article class=\"amen__card\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/amenities.webp\" alt=\"Profesionales conviviendo en el lounge y coworking\" \/>\n <div class=\"amen__overlay\">\n <h3>LOUNGES & COWORKING<\/h3>\n <p>Espacios dise\u00f1ados para tu productividad y descanso.<\/p>\n <\/div>\n <\/article>\n <article class=\"amen__card\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/65018c26-bc90-496f-8912-0fb44561f8d0.jpg\" alt=\"Amigos disfrutando una pel\u00edcula en la sala de cine\" \/>\n <div class=\"amen__overlay\">\n <h3>SALA DE CINE<\/h3>\n <p>Noches de pel\u00edcula sin salir de casa.<\/p>\n <\/div>\n <\/article>\n <article class=\"amen__card\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/01fbab74-5ddf-431f-8233-1f03fc5951ba.jpg\" alt=\"Vecinos jugando y conviviendo en la sala de juegos\" \/>\n <div class=\"amen__overlay\">\n <h3>SALA DE JUEGOS<\/h3>\n <p>El lugar ideal para convivir con tu comunidad.<\/p>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"faq\">\n <div class=\"container faq__inner\">\n <div class=\"faq__head\">\n <h2 class=\"section-title\">PREGUNTAS FRECUENTES<\/h2>\n <\/div>\n <div class=\"faq__list\" id=\"faqList\"><\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"cta\">\n <div class=\"cta__grid-pattern\"><\/div>\n <div class=\"container cta__inner\">\n <h2 class=\"cta__title\">TU NUEVO HOGAR<br \/>TE ESPERA<\/h2>\n <p class=\"cta__lead\">Agenda una visita hoy mismo y descubre por qu\u00e9 somos la opci\u00f3n favorita de los profesionales en CDMX.<\/p>\n <a href=\"https:\/\/urbanista.mx\/\" class=\"btn btn--primary btn--lg\">\n Explorar departamentos\n <svg class=\"icon\" viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/a>\n <\/div>\n <\/section>\n\n \n <footer class=\"footer\">\n <div class=\"container footer__inner\">\n <img decoding=\"async\" src=\"https:\/\/urbanista.mx\/wp-content\/uploads\/2026\/06\/urbanista-logo.webp\" alt=\"Urbanista\" class=\"footer__logo\" \/>\n <p id=\"footerCopy\">\u00a9 2026 Urbanista. Todos los derechos reservados.<\/p>\n <\/div>\n <\/footer>\n\n <script src=\"script.js\"><\/script>\n <\/body>\n<\/html>\n\n<style> \n\/* ===== Tema Urbanista ===== *\/\n:root {\n --primary: #00b4d8; \/* cian *\/\n --primary-90: #00a2c2;\n --secondary: #004e64; \/* teal profundo *\/\n --secondary-90: #014457;\n --background: #fafafa;\n --foreground: #004e64;\n --muted: #edeff2;\n --muted-fg: #69727d;\n --accent: #d3f6ff; \/* cian muy claro *\/\n --border: #e2e5e9;\n --white: #ffffff;\n --radius: 0.75rem;\n\n --font-sans: \"Outfit\", system-ui, sans-serif;\n --font-display: \"Bebas Neue\", sans-serif;\n}\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\nhtml { scroll-behavior: smooth; }\n\nbody {\n font-family: var(--font-sans);\n background: var(--background);\n color: var(--foreground);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n overflow-x: hidden;\n}\n\nh1, h2, h3, h4, h5, h6 {\n font-family: var(--font-display);\n letter-spacing: 0.05em;\n font-weight: 400;\n}\n\n::selection { background: rgba(0, 180, 216, 0.2); color: var(--secondary); }\n\nimg { display: block; max-width: 100%; }\n\na { text-decoration: none; }\n\n.container {\n width: 100%;\n max-width: 1480px;\n margin: 0 auto;\n padding: 0 1rem;\n}\n\n.text-primary { color: var(--primary); }\n\n\/* ===== Iconos ===== *\/\n.icon {\n width: 1.25rem;\n height: 1.25rem;\n stroke: currentColor;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n flex-shrink: 0;\n}\n.icon--md { width: 1.5rem; height: 1.5rem; }\n.icon--lg { width: 2rem; height: 2rem; }\n.icon--primary { color: var(--primary); }\n.icon--secondary { color: var(--secondary); }\n\/* paw fill *\/\n.rule__card .icon circle[r=\"2\"] { fill: currentColor; stroke: none; }\n\n\/* ===== Botones ===== *\/\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n font-weight: 600;\n letter-spacing: 0.03em;\n border: none;\n cursor: pointer;\n border-radius: 9999px;\n padding: 0.7rem 1.5rem;\n font-size: 0.95rem;\n transition: background 0.2s, transform 0.2s;\n font-family: var(--font-sans);\n}\n.btn--secondary { background: var(--secondary); color: var(--white); }\n.btn--secondary:hover { background: var(--secondary-90); }\n.btn--primary { background: var(--primary); color: var(--white); }\n.btn--primary:hover { background: var(--primary-90); }\n.btn--lg { height: 4rem; padding: 0 2.5rem; font-size: 1.125rem; }\n.btn--lg .icon { transition: transform 0.2s; }\n.btn--lg:hover .icon { transform: translateX(4px); }\n\n.badge {\n display: inline-block;\n padding: 0.25rem 0.75rem;\n border-radius: 9999px;\n background: var(--accent);\n color: var(--secondary);\n font-size: 0.875rem;\n font-weight: 600;\n letter-spacing: 0.08em;\n margin-bottom: 1rem;\n}\n\n.section-title {\n font-size: clamp(2.75rem, 6vw, 3.75rem);\n color: var(--secondary);\n line-height: 1;\n margin-bottom: 1rem;\n}\n\n\/* ===== Header ===== *\/\n.header {\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 50;\n background: rgba(255, 255, 255, 0.8);\n backdrop-filter: blur(12px);\n border-bottom: 1px solid rgba(226, 229, 233, 0.5);\n}\n.header__inner {\n height: 5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.header__logo { height: 2rem; object-fit: contain; }\n\n\/* ===== Hero ===== *\/\n.hero {\n position: relative;\n padding: 6.5rem 0 3rem;\n overflow: hidden;\n}\n.hero__bg { position: absolute; inset: 0; z-index: 0; }\n.hero__bg-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.1; }\n.hero__bg-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(to bottom, rgba(250,250,250,0.9), rgba(250,250,250,0.95) 50%, var(--background));\n}\n.hero__grid {\n position: relative;\n z-index: 10;\n display: grid;\n grid-template-columns: 1fr;\n gap: 2.5rem;\n align-items: center;\n}\n.hero__copy { max-width: 36rem; }\n.hero__title {\n font-size: clamp(3.5rem, 9vw, 6rem);\n color: var(--secondary);\n line-height: 0.85;\n margin-bottom: 1.25rem;\n}\n.hero__lead {\n font-size: 1.125rem;\n color: var(--muted-fg);\n line-height: 1.7;\n margin-bottom: 0;\n}\n\n\/* ===== Simulador ===== *\/\n.hero__sim { width: 100%; }\n.sim {\n width: 100%;\n max-width: 36rem;\n margin: 0 auto;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(4px);\n border-radius: 1rem;\n box-shadow: 0 25px 50px -12px rgba(0, 78, 100, 0.25);\n padding: 1.75rem;\n}\n@media (min-width: 640px) { .sim { padding: 2rem; } }\n\n.sim__toggle {\n position: relative;\n display: flex;\n background: var(--muted);\n padding: 0.25rem;\n border-radius: 0.75rem;\n margin-bottom: 1.5rem;\n}\n.sim__toggle-pill {\n position: absolute;\n top: 0.25rem;\n bottom: 0.25rem;\n left: 0;\n width: calc(50% - 0.25rem);\n background: var(--white);\n border-radius: 0.5rem;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n transform: translateX(4px);\n transition: transform 0.3s ease;\n}\n.sim__toggle-pill.is-income { transform: translateX(calc(100% + 4px)); }\n.sim__toggle-btn {\n flex: 1;\n position: relative;\n z-index: 1;\n padding: 0.75rem;\n font-size: 0.875rem;\n font-weight: 600;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--muted-fg);\n transition: color 0.2s;\n font-family: var(--font-sans);\n}\n.sim__toggle-btn.is-active { color: var(--secondary); }\n\n.sim__field { margin-bottom: 1.25rem; }\n.sim__label {\n display: block;\n font-size: 1rem;\n color: var(--secondary);\n font-weight: 500;\n margin-bottom: 0.75rem;\n}\n.sim__input-wrap { position: relative; display: flex; align-items: center; }\n.sim__prefix {\n position: absolute; left: 0;\n font-size: 1.5rem; color: var(--secondary);\n font-family: var(--font-display);\n}\n.sim__suffix {\n position: absolute; right: 0;\n font-size: 1.125rem; color: var(--muted-fg);\n font-family: var(--font-display);\n}\n.sim__input {\n width: 100%;\n padding: 0 4rem 0 1.75rem;\n height: 3.5rem;\n font-size: clamp(1.875rem, 5vw, 2.25rem);\n font-family: var(--font-display);\n color: var(--secondary);\n letter-spacing: 0.05em;\n background: transparent;\n border: none;\n border-bottom: 2px solid var(--border);\n outline: none;\n transition: border-color 0.2s;\n}\n.sim__input:focus { border-bottom-color: var(--primary); }\n\n.sim__slider {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 6px;\n border-radius: 9999px;\n margin: 1.25rem 0 0.5rem;\n background: var(--muted);\n outline: none;\n cursor: pointer;\n}\n.sim__slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px; height: 20px;\n border-radius: 50%;\n background: var(--white);\n border: 2px solid var(--primary);\n box-shadow: 0 1px 4px rgba(0,0,0,0.2);\n cursor: pointer;\n}\n.sim__slider::-moz-range-thumb {\n width: 20px; height: 20px;\n border-radius: 50%;\n background: var(--white);\n border: 2px solid var(--primary);\n box-shadow: 0 1px 4px rgba(0,0,0,0.2);\n cursor: pointer;\n}\n.sim__range-labels {\n display: flex;\n justify-content: space-between;\n font-size: 0.75rem;\n color: var(--muted-fg);\n}\n\n.sim__result {\n position: relative;\n margin-top: 1.75rem;\n padding: 1.5rem;\n background: rgba(211, 246, 255, 0.3);\n border: 1px solid rgba(211, 246, 255, 0.6);\n border-radius: 1rem;\n overflow: hidden;\n}\n@media (min-width: 640px) { .sim__result { padding: 1.75rem; } }\n.sim__result-bar {\n position: absolute; top: 0; left: 0;\n width: 4px; height: 100%;\n background: var(--primary);\n}\n.sim__result-label {\n display: block;\n font-size: 0.875rem;\n color: rgba(0, 78, 100, 0.8);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n margin-bottom: 0.5rem;\n}\n.sim__result-value {\n display: flex;\n align-items: baseline;\n gap: 0.5rem;\n margin-bottom: 0.75rem;\n}\n.sim__result-amount {\n font-size: clamp(3rem, 9vw, 3.75rem);\n font-family: var(--font-display);\n color: var(--primary);\n letter-spacing: 0.03em;\n line-height: 1;\n}\n.sim__result-mxn { font-size: 1.125rem; color: var(--secondary); font-family: var(--font-display); }\n\n.sim__note {\n display: flex;\n align-items: flex-start;\n gap: 0.5rem;\n font-size: 0.875rem;\n color: var(--muted-fg);\n line-height: 1.6;\n}\n.sim__note .icon { width: 1rem; height: 1rem; margin-top: 0.15rem; }\n.sim__note strong { color: var(--secondary); }\n.sim__note--credit {\n font-size: 0.78rem;\n margin-top: 0.75rem;\n padding-top: 0.75rem;\n border-top: 1px solid rgba(211, 246, 255, 0.8);\n}\n\n.sim__deposits {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n margin-top: 1.25rem;\n padding-top: 1.25rem;\n border-top: 1px solid var(--border);\n}\n.sim__deposit-label { font-size: 0.75rem; color: var(--muted-fg); margin-bottom: 0.25rem; }\n.sim__deposit-value { font-weight: 600; color: var(--secondary); }\n\n\/* ===== Regla 3x ===== *\/\n.rule { padding: 3.5rem 0; background: var(--secondary); color: var(--white); }\n.rule__inner { max-width: 64rem; margin: 0 auto; text-align: center; }\n.rule__title { font-size: clamp(2.75rem, 6vw, 3.75rem); margin-bottom: 1rem; }\n.rule__lead { font-size: 1.125rem; color: rgba(255,255,255,0.8); line-height: 1.7; margin-bottom: 2rem; }\n.rule__cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; text-align: left; }\n.rule__card {\n padding: 1.5rem;\n border-radius: 1rem;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.1);\n}\n.rule__card .icon { margin-bottom: 0.75rem; }\n.rule__card h3 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; margin-bottom: 0.5rem; }\n.rule__card p { font-size: 0.875rem; color: rgba(255,255,255,0.7); }\n\n\/* ===== Requisitos ===== *\/\n.reqs { padding: 4rem 0; background: rgba(211, 246, 255, 0.2); }\n.reqs__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }\n.reqs__content { display: flex; flex-direction: column; gap: 1.5rem; }\n.reqs__lead { color: var(--muted-fg); font-size: 1.125rem; }\n.reqs__list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }\n.reqs__list li {\n display: flex;\n align-items: center;\n gap: 1rem;\n background: var(--white);\n padding: 1rem;\n border-radius: 0.75rem;\n box-shadow: 0 1px 3px rgba(0,0,0,0.06);\n border: 1px solid var(--border);\n}\n.reqs__check {\n width: 2rem; height: 2rem;\n border-radius: 50%;\n background: rgba(0,180,216,0.1);\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n}\n.reqs__check .icon { width: 1rem; height: 1rem; }\n.reqs__list span { font-weight: 500; color: var(--secondary); }\n.reqs__contract {\n background: rgba(0,180,216,0.05);\n border: 1px solid rgba(0,180,216,0.2);\n border-radius: 0.75rem;\n padding: 1.5rem;\n display: flex;\n gap: 1rem;\n align-items: flex-start;\n}\n.reqs__contract h4 { font-family: var(--font-sans); font-weight: 600; color: var(--secondary); margin-bottom: 0.25rem; letter-spacing: 0; }\n.reqs__contract p { font-size: 0.875rem; color: var(--muted-fg); }\n.reqs__img {\n max-height: 85vh;\n border-radius: 1.5rem;\n overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0, 78, 100, 0.25);\n}\n.reqs__img img { width: 100%; height: 100%; max-height: 85vh; object-fit: cover; }\n\n\/* ===== Amenidades ===== *\/\n.amen { padding: 4rem 0; background: var(--background); }\n.amen__head { text-align: center; max-width: 42rem; margin: 0 auto 2.5rem; }\n.amen__head p { color: var(--muted-fg); font-size: 1.125rem; }\n.amen__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }\n.amen__card {\n position: relative;\n aspect-ratio: 16\/10;\n border-radius: 1rem;\n overflow: hidden;\n}\n.amen__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }\n.amen__card:hover img { transform: scale(1.05); }\n.amen__overlay {\n position: absolute; inset: 0;\n background: linear-gradient(to top, rgba(0,78,100,0.8), transparent);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 2rem;\n}\n.amen__overlay h3 { font-size: 1.875rem; color: var(--white); margin-bottom: 0.5rem; }\n.amen__overlay p { color: rgba(255,255,255,0.8); }\n\n\/* ===== FAQ ===== *\/\n.faq { padding: 4rem 0; background: rgba(237, 239, 242, 0.5); border-top: 1px solid var(--border); }\n.faq__inner { max-width: 64rem; margin: 0 auto; }\n.faq__head { text-align: center; margin-bottom: 2rem; }\n.faq__list {\n background: var(--white);\n border-radius: 1rem;\n box-shadow: 0 1px 3px rgba(0,0,0,0.06);\n border: 1px solid var(--border);\n padding: 0.5rem;\n}\n.faq__item { border-bottom: 1px solid var(--border); }\n.faq__item:last-child { border-bottom: none; }\n.faq__q {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n text-align: left;\n padding: 1.25rem 1rem;\n background: none;\n border: none;\n cursor: pointer;\n font-family: var(--font-sans);\n font-weight: 600;\n font-size: 1rem;\n color: var(--secondary);\n transition: color 0.2s;\n}\n.faq__q:hover { color: var(--primary); }\n.faq__q .icon { transition: transform 0.3s; }\n.faq__item.is-open .faq__q .icon { transform: rotate(180deg); }\n.faq__a {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n}\n.faq__a-inner { padding: 0 1rem 1.25rem; color: var(--muted-fg); line-height: 1.7; }\n\n\/* ===== CTA ===== *\/\n.cta { position: relative; padding: 4.5rem 0; background: var(--secondary); overflow: hidden; }\n.cta__grid-pattern {\n position: absolute; inset: 0;\n background-image:\n linear-gradient(to right, rgba(0,180,216,0.08) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(0,180,216,0.08) 1px, transparent 1px);\n background-size: 4rem 4rem;\n}\n.cta__inner { position: relative; z-index: 10; text-align: center; }\n.cta__title { font-size: clamp(3.5rem, 10vw, 6rem); color: var(--white); margin-bottom: 1.25rem; line-height: 0.9; }\n.cta__lead { font-size: 1.25rem; color: rgba(255,255,255,0.8); max-width: 42rem; margin: 0 auto 2rem; }\n\n\/* ===== Footer ===== *\/\n.footer { background: var(--background); padding: 2.5rem 0; border-top: 1px solid var(--border); }\n.footer__inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n gap: 1.5rem;\n}\n.footer__logo { height: 2rem; object-fit: contain; opacity: 0.5; filter: grayscale(1); }\n.footer p { font-size: 0.875rem; color: var(--muted-fg); }\n\n\/* ===== Animaciones de aparici\u00f3n ===== *\/\n.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }\n.reveal.is-visible { opacity: 1; transform: translateY(0); }\n\n\/* ===== Responsive ===== *\/\n@media (min-width: 768px) {\n .rule__cards { grid-template-columns: repeat(3, 1fr); }\n .amen__grid { grid-template-columns: 1fr 1fr; }\n .header__cta { display: inline-flex; }\n .footer__inner { flex-direction: row; }\n}\n@media (max-width: 767px) {\n .header__cta { display: none; }\n}\n@media (min-width: 1024px) {\n .hero { padding: 8rem 0 4rem; }\n .hero__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }\n .hero__sim { justify-self: end; }\n .reqs__grid { grid-template-columns: 1fr 1fr; }\n}\n\n<\/style>\n\n<script> \n(function () {\n \"use strict\";\n\n var RENT_MIN = 15000;\n var RENT_MAX = 70000;\n var INCOME_MIN = RENT_MIN * 3;\n var INCOME_MAX = RENT_MAX * 3;\n var RENT_DEFAULT = 25000;\n var INCOME_DEFAULT = RENT_DEFAULT * 3;\n\n var mode = \"rent\";\n var amount = RENT_DEFAULT;\n\n var pill = document.getElementById(\"togglePill\");\n var btnRent = document.getElementById(\"btnRent\");\n var btnIncome = document.getElementById(\"btnIncome\");\n var inputLabel = document.getElementById(\"inputLabel\");\n var input = document.getElementById(\"amountInput\");\n var slider = document.getElementById(\"amountSlider\");\n var rangeMin = document.getElementById(\"rangeMin\");\n var rangeMax = document.getElementById(\"rangeMax\");\n var resultLabel = document.getElementById(\"resultLabel\");\n var resultAmount = document.getElementById(\"resultAmount\");\n var depositCitizen = document.getElementById(\"depositCitizen\");\n var depositForeigner = document.getElementById(\"depositForeigner\");\n\n function formatCurrency(val) {\n return new Intl.NumberFormat(\"es-MX\", {\n style: \"currency\",\n currency: \"MXN\",\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }).format(val);\n }\n function formatThousands(val) {\n return val === 0 ? \"\" : val.toLocaleString(\"en-US\");\n }\n\n function getRange() {\n return mode === \"rent\"\n ? { min: RENT_MIN, max: RENT_MAX, step: 1000 }\n : { min: INCOME_MIN, max: INCOME_MAX, step: 3000 };\n }\n\n function render() {\n var r = getRange();\n var effective = Math.min(Math.max(amount, r.min), r.max);\n\n inputLabel.textContent =\n mode === \"rent\" ? \"\u00bfCu\u00e1nto quieres pagar de renta?\" : \"\u00bfCu\u00e1l es tu ingreso neto mensual?\";\n resultLabel.textContent =\n mode === \"rent\" ? \"Ingreso neto requerido\" : \"Renta m\u00e1xima recomendada\";\n\n slider.min = r.min;\n slider.max = r.max;\n slider.step = r.step;\n slider.value = effective;\n rangeMin.textContent = formatCurrency(r.min);\n rangeMax.textContent = formatCurrency(r.max);\n updateSliderFill(effective, r.min, r.max);\n\n var requiredIncome = mode === \"rent\" ? effective * 3 : 0;\n var maxRent = mode === \"income\" ? Math.floor(effective \/ 3) : 0;\n resultAmount.textContent = formatCurrency(mode === \"rent\" ? requiredIncome : maxRent);\n\n var base = mode === \"rent\" ? effective : maxRent;\n depositCitizen.textContent = formatCurrency(base * 1.5);\n depositForeigner.textContent = formatCurrency(base * 2);\n }\n\n function updateSliderFill(val, min, max) {\n var pct = ((val - min) \/ (max - min)) * 100;\n slider.style.background =\n \"linear-gradient(to right, var(--primary) 0%, var(--primary) \" +\n pct +\n \"%, var(--muted) \" +\n pct +\n \"%, var(--muted) 100%)\";\n }\n\n function setMode(newMode) {\n if (mode === newMode) return;\n mode = newMode;\n amount = mode === \"rent\" ? RENT_DEFAULT : INCOME_DEFAULT;\n pill.classList.toggle(\"is-income\", mode === \"income\");\n btnRent.classList.toggle(\"is-active\", mode === \"rent\");\n btnIncome.classList.toggle(\"is-active\", mode === \"income\");\n input.value = formatThousands(amount);\n render();\n }\n\n btnRent.addEventListener(\"click\", function () { setMode(\"rent\"); });\n btnIncome.addEventListener(\"click\", function () { setMode(\"income\"); });\n\n input.addEventListener(\"input\", function () {\n var digits = input.value.replace(\/[^0-9]\/g, \"\");\n amount = Number(digits || 0);\n input.value = formatThousands(amount);\n render();\n });\n\n input.addEventListener(\"blur\", function () {\n var r = getRange();\n amount = Math.min(Math.max(amount, r.min), r.max);\n input.value = formatThousands(amount);\n render();\n });\n\n slider.addEventListener(\"input\", function () {\n amount = Number(slider.value);\n input.value = formatThousands(amount);\n render();\n });\n\n var requirements = [\n \"Identificaci\u00f3n oficial vigente\",\n \"Comprobante de ingresos netos (\u00faltimos 3 meses)\",\n \"Constancia de Situaci\u00f3n Fiscal actualizada\",\n \"Comprobante de domicilio (no mayor a 3 meses)\",\n ];\n var checkSvg =\n '<svg class=\"icon\" viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>';\n var reqsList = document.getElementById(\"reqsList\");\n reqsList.innerHTML = requirements\n .map(function (item) {\n return (\n '<li><span class=\"reqs__check icon--primary\">' +\n checkSvg +\n \"<\/span><span>\" +\n item +\n \"<\/span><\/li>\"\n );\n })\n .join(\"\");\n\n var faqs = [\n {\n q: \"\u00bfRealmente no necesito aval?\",\n a: \"Es correcto. En Urbanista confiamos en tu historial financiero. Si puedes comprobar ingresos netos mensuales de al menos 3 veces el valor de la renta durante los \u00faltimos 3 meses, no requieres presentar aval ni fiador.\",\n },\n {\n q: \"\u00bfCu\u00e1l es el plazo m\u00ednimo de renta?\",\n a: \"Nuestros contratos est\u00e1n dise\u00f1ados para brindar estabilidad, por lo que el plazo m\u00ednimo de arrendamiento es de 12 meses.\",\n },\n {\n q: \"\u00bfDe cu\u00e1nto es el dep\u00f3sito en garant\u00eda?\",\n a: \"El dep\u00f3sito est\u00e1ndar es equivalente a 1.5 meses de renta para ciudadanos mexicanos. Para extranjeros, solicitamos 2 meses de renta. Ambos casos est\u00e1n sujetos a una evaluaci\u00f3n crediticia y legal est\u00e1ndar.\",\n },\n {\n q: \"\u00bfAceptan mascotas?\",\n a: \"\u00a1S\u00ed! Somos una comunidad pet-friendly. Aceptamos mascotas de hasta 25 kg. \u00danicamente te pediremos presentar su cartilla de vacunaci\u00f3n actualizada para el expediente.\",\n },\n ];\n var chevron =\n '<svg class=\"icon\" viewBox=\"0 0 24 24\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>';\n var faqList = document.getElementById(\"faqList\");\n faqList.innerHTML = faqs\n .map(function (f, i) {\n var qId = \"faq-q-\" + i;\n var aId = \"faq-a-\" + i;\n return (\n '<div class=\"faq__item\">' +\n '<button type=\"button\" class=\"faq__q\" id=\"' + qId + '\" aria-expanded=\"false\" aria-controls=\"' + aId + '\"><span>' +\n f.q +\n \"<\/span>\" +\n chevron +\n \"<\/button>\" +\n '<div class=\"faq__a\" id=\"' + aId + '\" role=\"region\" aria-labelledby=\"' + qId + '\"><div class=\"faq__a-inner\">' +\n f.a +\n \"<\/div><\/div><\/div>\"\n );\n })\n .join(\"\");\n\n faqList.querySelectorAll(\".faq__q\").forEach(function (btn) {\n btn.addEventListener(\"click\", function () {\n var item = btn.parentElement;\n var panel = item.querySelector(\".faq__a\");\n var isOpen = item.classList.contains(\"is-open\");\n faqList.querySelectorAll(\".faq__item\").forEach(function (it) {\n it.classList.remove(\"is-open\");\n it.querySelector(\".faq__a\").style.maxHeight = null;\n it.querySelector(\".faq__q\").setAttribute(\"aria-expanded\", \"false\");\n });\n if (!isOpen) {\n item.classList.add(\"is-open\");\n panel.style.maxHeight = panel.scrollHeight + \"px\";\n btn.setAttribute(\"aria-expanded\", \"true\");\n }\n });\n });\n\n document.getElementById(\"footerCopy\").textContent =\n \"\u00a9 \" + new Date().getFullYear() + \" Urbanista. Todos los derechos reservados.\";\n\n var revealEls = document.querySelectorAll(\".reveal\");\n if (\"IntersectionObserver\" in window) {\n var observer = new IntersectionObserver(\n function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add(\"is-visible\");\n observer.unobserve(entry.target);\n }\n });\n },\n { threshold: 0.15, rootMargin: \"-50px\" }\n );\n revealEls.forEach(function (el) { observer.observe(el); });\n } else {\n revealEls.forEach(function (el) { el.classList.add(\"is-visible\"); });\n }\n\n render();\n})();\n\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Calculadora de Renta \u2014 Urbanista Ver departamentos T\u00da VIVES, T\u00da DISFRUTAS DESCUBRE TU PR\u00d3XIMO HOGAR. Calcula al instante el ingreso necesario para rentar el departamento que quieres, o descubre tu presupuesto m\u00e1ximo seg\u00fan tus ingresos. Sin aval, sin complicaciones. Quiero rentar Conozco mi ingreso \u00bfCu\u00e1nto quieres pagar de renta? $ MXN $15,000 $70,000 Ingreso neto […]<\/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-25023","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/25023","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=25023"}],"version-history":[{"count":9,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/25023\/revisions"}],"predecessor-version":[{"id":25071,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/25023\/revisions\/25071"}],"wp:attachment":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/media?parent=25023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}