{"id":2477,"date":"2026-09-18T23:55:25","date_gmt":"2026-09-18T23:55:25","guid":{"rendered":"https:\/\/www.cityhaus.com.mx\/?page_id=2477"},"modified":"2026-09-25T20:59:47","modified_gmt":"2026-09-25T20:59:47","slug":"roi-calculator","status":"publish","type":"page","link":"https:\/\/www.cityhaus.com.mx\/en\/roi-calculator\/","title":{"rendered":"ROI Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2477\" class=\"elementor elementor-2477\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d8b323 e-con-full e-flex e-con e-parent\" data-id=\"5d8b323\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd2a320 elementor-widget elementor-widget-html\" data-id=\"cd2a320\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"cityhaus-calculadora-roi\">\n<style>\n  #cityhaus-calculadora-roi {\n    --ch-navy: #103250;\n    --ch-navy-dark: #01212F;\n    --ch-gold: #A09368;\n    --ch-gold-hover: #8E825A;\n    --ch-gold-light: rgba(160, 147, 104, 0.12);\n    --ch-gold-border: rgba(160, 147, 104, 0.35);\n\n    --ch-bg: #F8F7F5;\n    --ch-surface: #FFFFFF;\n    --ch-border: #E5E1DA;\n    --ch-border-light: #F0ECE6;\n    --ch-text-main: #103250;\n    --ch-text-muted: #6E7D8B;\n    --ch-green: #2E7D32;\n    --ch-green-bg: rgba(46, 125, 50, 0.1);\n\n    --font-heading: 'Agenor Font', sans-serif;\n    --font-body: 'Creato Display', sans-serif;\n\n    --radius-sm: 8px;\n    --radius-md: 12px;\n    --radius-lg: 15px;\n    --radius-pill: 50px;\n\n    background-color: var(--ch-bg);\n    color: var(--ch-text-main);\n    font-family: var(--font-body);\n    line-height: 1.5;\n    padding: 50px 25px 90px;\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  #cityhaus-calculadora-roi * { box-sizing: border-box; }\n\n  .roi-container-inner {\n    max-width: 1450px;\n    margin: 0 auto;\n  }\n  \n  .cta-buttons-group {\n    color: white;\n  }\n  \n  .cta-button:visited {\n    color: #FFFFFF !important;\n  }\n  \n  .cta-button:hover {\n    color: #FFFFFF !important;\n  }\n  \n  .roi-header {\n    text-align: center;\n    max-width: 800px;\n    margin: 0 auto 35px;\n  }\n  .roi-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--ch-gold-light);\n    color: var(--ch-gold);\n    padding: 6px 18px;\n    border-radius: var(--radius-pill);\n    font-size: 11px;\n    font-weight: 600;\n    font-family: var(--font-heading);\n    text-transform: uppercase;\n    letter-spacing: 0.14em;\n    margin-bottom: 15px;\n    border: 1px solid var(--ch-gold-border);\n  }\n  .roi-badge::before {\n    content: \"\";\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: var(--ch-gold);\n  }\n  .roi-header h1 {\n    font-family: var(--font-body);\n    font-size: clamp(28px, 3.8vw, 42px);\n    font-weight: 500;\n    letter-spacing: -0.01em;\n    color: var(--ch-navy);\n    line-height: 1.15;\n    margin-bottom: 12px;\n  }\n  .roi-header p {\n    font-family: var(--font-body);\n    font-size: clamp(14px, 1.6vw, 16px);\n    color: var(--ch-text-muted);\n    font-weight: 400;\n  }\n\n  .unit-loaded-banner {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    background: #FFFFFF;\n    border: 1.5px solid var(--ch-gold);\n    border-radius: var(--radius-md);\n    padding: 14px 20px;\n    margin: 0 auto 35px;\n    max-width: 750px;\n    box-shadow: 0 8px 25px rgba(160, 147, 104, 0.15);\n    animation: fadeInBanner 0.5s ease;\n  }\n  .unit-loaded-banner.active {\n    display: flex;\n  }\n  .banner-icon {\n    width: 28px;\n    height: 28px;\n    background: var(--ch-gold);\n    color: #FFFFFF;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 14px;\n    font-weight: 700;\n    flex-shrink: 0;\n  }\n  .banner-text {\n    font-size: 13.5px;\n    color: var(--ch-navy);\n  }\n  .banner-text strong {\n    color: var(--ch-navy);\n    font-weight: 700;\n  }\n  @keyframes fadeInBanner {\n    from { opacity: 0; transform: translateY(-10px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  .roi-main-grid {\n    display: grid;\n    grid-template-columns: 1.25fr 0.95fr;\n    gap: 28px;\n    align-items: start;\n  }\n  @media (max-width: 1024px) {\n    .roi-main-grid {\n      grid-template-columns: 1fr;\n      gap: 24px;\n    }\n  }\n\n  .ui-card {\n    background: var(--ch-surface);\n    border-radius: var(--radius-md);\n    border: 1px solid var(--ch-border);\n    box-shadow: 0 4px 20px rgba(16, 50, 80, 0.04);\n    padding: 26px;\n    margin-bottom: 22px;\n    transition: all 0.25s ease;\n  }\n  .ui-card:hover {\n    border-color: var(--ch-gold);\n    box-shadow: 0 8px 30px rgba(16, 50, 80, 0.08);\n  }\n  .ui-card-title {\n    font-family: var(--font-heading);\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--ch-navy);\n    margin-bottom: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n  }\n  .ui-card-subtitle {\n    font-family: var(--font-body);\n    font-size: 13px;\n    color: var(--ch-text-muted);\n    margin-bottom: 20px;\n  }\n\n  .form-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));\n    gap: 14px;\n    margin-bottom: 14px;\n  }\n  .form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }\n  .form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }\n\n  @media (max-width: 600px) {\n    .form-grid.cols-3,\n    .form-grid.cols-2 { grid-template-columns: 1fr; }\n  }\n\n  .form-field {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  .form-field label {\n    font-size: 11px;\n    font-weight: 600;\n    font-family: var(--font-heading);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    color: var(--ch-navy);\n  }\n  .input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n  }\n  .form-field select,\n  .form-field input {\n    width: 100%;\n    font-family: var(--font-body);\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--ch-navy);\n    background: #FBFBFA;\n    border: 1px solid var(--ch-border);\n    border-radius: var(--radius-sm);\n    padding: 11px 13px;\n    outline: none;\n    transition: all 0.2s ease;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n  .form-field select {\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23103250' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right 14px center;\n    padding-right: 36px;\n    cursor: pointer;\n  }\n  .form-field select:focus,\n  .form-field input:focus {\n    background: #FFFFFF;\n    border-color: var(--ch-gold);\n    box-shadow: 0 0 0 3px var(--ch-gold-light);\n  }\n  .input-wrapper .suffix {\n    position: absolute;\n    right: 14px;\n    font-size: 11px;\n    font-weight: 700;\n    font-family: var(--font-body);\n    color: var(--ch-gold);\n    pointer-events: none;\n  }\n  .input-wrapper input.has-suffix {\n    padding-right: 48px;\n  }\n\n  .form-field.readonly input {\n    background: #F2F0EC;\n    border-color: transparent;\n    color: var(--ch-navy);\n    font-weight: 600;\n    cursor: default;\n  }\n  .field-hint {\n    font-size: 11px;\n    color: var(--ch-text-muted);\n    margin-top: 2px;\n  }\n\n  .segmented-switch {\n    display: flex;\n    background: #EDEAE4;\n    padding: 4px;\n    border-radius: var(--radius-sm);\n    border: 1px solid var(--ch-border);\n    gap: 4px;\n  }\n  .segmented-switch button {\n    flex: 1;\n    border: 0;\n    background: transparent;\n    padding: 8px 10px;\n    font-family: var(--font-heading);\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 0.05em;\n    text-transform: uppercase;\n    color: var(--ch-text-muted);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n  }\n  .segmented-switch button.active {\n    background: var(--ch-navy);\n    color: #FFFFFF;\n    box-shadow: 0 2px 8px rgba(16, 50, 80, 0.25);\n  }\n\n  .results-card-sticky {\n    position: sticky;\n    top: 30px;\n    background: var(--ch-navy-dark);\n    border-radius: var(--radius-lg);\n    color: #FFFFFF;\n    padding: 32px 28px;\n    box-shadow: 0 20px 45px rgba(1, 33, 47, 0.4);\n    border: 1px solid var(--ch-gold);\n    overflow: hidden;\n    scroll-margin-top: 30px;\n  }\n  .results-card-sticky::before {\n    content: \"\";\n    position: absolute;\n    top: -90px;\n    right: -90px;\n    width: 240px;\n    height: 240px;\n    background: radial-gradient(circle, rgba(160, 147, 104, 0.22) 0%, rgba(160, 147, 104, 0) 70%);\n    pointer-events: none;\n  }\n\n  .results-header-tag {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.16em;\n    font-family: var(--font-heading);\n    color: var(--ch-gold);\n    font-weight: 600;\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  \/* T\u00edtulo principal a 45px, interlineado compacto y espaciado de letras ampliado *\/\n  .results-card-sticky h3 {\n    font-family: var(--font-body);\n    font-size: clamp(30px, 3.4vw, 40px);\n    font-weight: 600;\n    color: #FFFFFF;\n    line-height: 1.05;\n    letter-spacing: 0.04em;\n    margin-top: 0;\n    margin-bottom: 2px;\n  }\n\n  \/* Subt\u00edtulo integrado como conjunto al t\u00edtulo con espaciado de lectura *\/\n  .results-card-sticky .sub {\n    font-size: 13.5px;\n    color: rgba(255, 255, 255, 0.75);\n    line-height: 1.25;\n    letter-spacing: 0.025em;\n    font-style: italic;\n    margin-top: 0;\n    margin-bottom: 16px;\n  }\n\n  \/* Ficha de unidad seleccionada con buen espaciado *\/\n  .unit-meta-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 12.5px;\n    color: #E2D9BE;\n    letter-spacing: 0.04em;\n    margin-bottom: 22px;\n    font-weight: 400;\n  }\n  .unit-meta-badge svg {\n    flex-shrink: 0;\n    color: var(--ch-gold);\n  }\n  .badge-reservado {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    background: var(--ch-gold);\n    color: var(--ch-navy-dark);\n    border: 1px solid var(--ch-gold);\n    padding: 4px 13px;\n    border-radius: var(--radius-pill);\n    font-family: var(--font-heading);\n    font-size: 10.5px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    line-height: 1.4;\n    box-shadow: 0 2px 10px rgba(160, 147, 104, 0.45);\n  }\n  .badge-reservado::before {\n    content: \"\";\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: var(--ch-navy-dark);\n  }\n\n  .stat-hero {\n    background: rgba(255, 255, 255, 0.04);\n    border: 1px solid var(--ch-gold-border);\n    border-radius: var(--radius-md);\n    padding: 22px;\n    margin-bottom: 22px;\n    backdrop-filter: blur(8px);\n  }\n  .stat-hero-number {\n    font-family: var(--font-body);\n    font-size: clamp(26px, 3.2vw, 36px);\n    font-weight: 700;\n    color: var(--ch-gold);\n    line-height: 1.15;\n    margin-bottom: 6px;\n    letter-spacing: -0.02em;\n  }\n  .stat-hero-label {\n    font-size: 12px;\n    font-weight: 600;\n    font-family: var(--font-heading);\n    color: #FFFFFF;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n  .stat-hero-desc {\n    font-size: 11.5px;\n    color: rgba(255, 255, 255, 0.65);\n    margin-top: 3px;\n  }\n\n  .stat-matrix {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    margin-bottom: 24px;\n  }\n  .stat-row-2cols {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n  }\n  .stat-cell {\n    background: rgba(255, 255, 255, 0.04);\n    border: 1px solid rgba(255, 255, 255, 0.08);\n    border-radius: var(--radius-sm);\n    padding: 13px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n  .stat-cell.full-width {\n    width: 100%;\n    text-align: center;\n    padding: 15px 13px;\n  }\n  .stat-cell-value {\n    font-size: 18px;\n    font-weight: 600;\n    color: #FFFFFF;\n    font-family: var(--font-body);\n    letter-spacing: 0.01em;\n  }\n  .stat-cell.full-width .stat-cell-value {\n    font-size: 22px;\n    font-weight: 700;\n    color: #FFFFFF;\n  }\n  .stat-cell-label {\n    font-size: 10.5px;\n    text-transform: uppercase;\n    font-family: var(--font-heading);\n    letter-spacing: 0.06em;\n    color: rgba(255, 255, 255, 0.65);\n    margin-top: 4px;\n  }\n  .stat-cell-note {\n    font-size: 9.5px;\n    color: rgba(255, 255, 255, 0.45);\n    margin-top: 3px;\n    font-style: italic;\n    line-height: 1.25;\n  }\n  .discount-note {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 8px;\n    margin-top: 10px;\n    font-size: 12px;\n    color: rgba(255, 255, 255, 0.75);\n    letter-spacing: 0.02em;\n  }\n  .discount-note .dn-old {\n    text-decoration: line-through;\n    color: rgba(255, 255, 255, 0.55);\n    font-weight: 500;\n  }\n  .discount-note .dn-badge {\n    background: var(--ch-gold);\n    color: var(--ch-navy-dark);\n    font-family: var(--font-heading);\n    font-size: 10px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    padding: 3px 10px;\n    border-radius: var(--radius-pill);\n  }\n\n  .timeline-container {\n    border-top: 1px solid rgba(255, 255, 255, 0.12);\n    padding-top: 20px;\n  }\n  .timeline-title {\n    display: flex;\n    justify-content: space-between;\n    font-size: 11px;\n    font-weight: 600;\n    font-family: var(--font-heading);\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    color: rgba(255, 255, 255, 0.75);\n    margin-bottom: 12px;\n  }\n  .progress-track {\n    position: relative;\n    height: 10px;\n    border-radius: var(--radius-pill);\n    background: rgba(0, 0, 0, 0.4);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    overflow: visible;\n  }\n  .progress-fill {\n    position: absolute;\n    left: 0; top: 0; bottom: 0;\n    width: 0%;\n    background: linear-gradient(90deg, #7A6F4C, var(--ch-gold), #D4C9A2);\n    border-radius: var(--radius-pill);\n    transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\n  }\n  .progress-pointer {\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    width: 20px;\n    height: 20px;\n    background: #FFFFFF;\n    border: 3px solid var(--ch-gold);\n    border-radius: 50%;\n    box-shadow: 0 0 12px var(--ch-gold);\n    transition: left 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);\n  }\n  .timeline-milestones {\n    display: flex;\n    justify-content: space-between;\n    font-size: 10px;\n    font-family: var(--font-heading);\n    color: rgba(255, 255, 255, 0.45);\n    margin-top: 10px;\n    font-weight: 500;\n  }\n  .recovery-summary {\n    margin-top: 16px;\n    font-size: 13.5px;\n    color: #FFFFFF;\n    line-height: 1.45;\n    background: rgba(160, 147, 104, 0.14);\n    border-left: 3px solid var(--ch-gold);\n    padding: 12px 14px;\n    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;\n  }\n  .recovery-summary strong {\n    color: var(--ch-gold);\n    font-weight: 600;\n  }\n\n  .cta-buttons-group {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    margin-top: 22px;\n  }\n  .cta-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    background: var(--ch-gold);\n    color: #FFFFFF;\n    font-family: var(--font-body);\n    font-weight: 500;\n    font-size: 13px;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    padding: 13px 22px;\n    border-radius: var(--radius-pill);\n    border: none;\n    cursor: pointer;\n    text-decoration: none;\n    transition: all 0.25s ease;\n    gap: 8px;\n  }\n  .cta-button:hover {\n    background: var(--ch-gold-hover);\n    transform: translateY(-2px);\n    box-shadow: 0 6px 18px rgba(160, 147, 104, 0.35);\n  }\n  .cta-button-whatsapp {\n    background: transparent;\n    color: var(--ch-gold);\n    border: 1px solid var(--ch-gold);\n  }\n  .cta-button-whatsapp:hover {\n    background: var(--ch-gold);\n    color: #FFFFFF;\n  }\n\n  \/* BOT\u00d3N SUTIL COMPARTIR *\/\n  .share-link-subtle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    background: transparent;\n    border: none;\n    color: rgba(255, 255, 255, 0.5);\n    font-family: var(--font-body);\n    font-size: 12px;\n    padding: 6px 10px;\n    margin-top: 4px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    border-radius: var(--radius-pill);\n    text-decoration: none;\n    letter-spacing: 0.02em;\n  }\n  .share-link-subtle:hover {\n    color: var(--ch-gold);\n    background: rgba(255, 255, 255, 0.04);\n  }\n  .share-link-subtle svg {\n    flex-shrink: 0;\n    transition: transform 0.2s ease;\n  }\n  .share-link-subtle:hover svg {\n    transform: translateY(-1px);\n  }\n\n  .table-card {\n    background: var(--ch-surface);\n    border-radius: var(--radius-md);\n    border: 1px solid var(--ch-border);\n    box-shadow: 0 4px 20px rgba(16, 50, 80, 0.04);\n    padding: 30px 0 16px;\n    margin-top: 30px;\n    overflow: hidden;\n  }\n  .table-card-head {\n    padding: 0 30px 18px;\n    border-bottom: 1px solid var(--ch-border-light);\n  }\n  .table-card-head h2 {\n    font-family: var(--font-body);\n    font-size: 22px;\n    font-weight: 500;\n    color: var(--ch-navy);\n    margin-bottom: 4px;\n  }\n  .table-responsive {\n    width: 100%;\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n  table.ch-table {\n    width: 100%;\n    min-width: 960px;\n    border-collapse: separate;\n    border-spacing: 0;\n    font-size: 13px;\n  }\n  table.ch-table th {\n    background: var(--ch-bg);\n    color: var(--ch-navy);\n    font-family: var(--font-heading);\n    font-weight: 600;\n    text-transform: uppercase;\n    font-size: 10.5px;\n    letter-spacing: 0.06em;\n    padding: 13px 16px;\n    text-align: right;\n    border-bottom: 1px solid var(--ch-border);\n    white-space: nowrap;\n  }\n  table.ch-table td {\n    padding: 12px 16px;\n    text-align: right;\n    border-bottom: 1px solid var(--ch-border-light);\n    color: var(--ch-navy);\n    font-variant-numeric: tabular-nums;\n    font-weight: 400;\n    white-space: nowrap;\n  }\n  table.ch-table th:first-child,\n  table.ch-table td:first-child {\n    text-align: center;\n    padding-left: 28px;\n    position: sticky;\n    left: 0;\n    background: inherit;\n    z-index: 2;\n  }\n  table.ch-table th:first-child { background: var(--ch-bg); }\n  table.ch-table td:first-child { background: #FFFFFF; font-weight: 600; }\n  table.ch-table tr:hover td { background-color: rgba(160, 147, 104, 0.08); }\n  table.ch-table tr:hover td:first-child { background-color: #F8F6F0; }\n\n  table.ch-table tr.row-recovered td {\n    background-color: rgba(160, 147, 104, 0.15);\n    font-weight: 600;\n  }\n  table.ch-table tr.row-recovered td:first-child {\n    background-color: rgba(160, 147, 104);\n  }\n\n  .badge-status {\n    display: inline-block;\n    padding: 3px 12px;\n    border-radius: var(--radius-pill);\n    font-size: 10px;\n    font-weight: 600;\n    font-family: var(--font-heading);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n  .badge-status.yes {\n    background: var(--ch-green-bg);\n    color: var(--ch-green);\n  }\n  .badge-status.no {\n    background: #EDEAE4;\n    color: var(--ch-text-muted);\n  }\n\n  .empty-placeholder {\n    padding: 60px 24px;\n    text-align: center;\n    color: var(--ch-text-muted);\n  }\n  .empty-placeholder h4 {\n    font-family: var(--font-body);\n    font-size: 18px;\n    color: var(--ch-navy);\n    margin-bottom: 6px;\n  }\n\n  .roi-disclaimer {\n    text-align: center;\n    font-size: 11.5px;\n    color: var(--ch-text-muted);\n    margin-top: 30px;\n  }\n<\/style>\n\n<div class=\"roi-container-inner\">\n\n  <header class=\"roi-header\">\n    <div class=\"roi-badge\" id=\"roiCustomBadge\">Financial Performance<\/div>\n    <h1>Discover the potential of your investment<\/h1>\n    <p>Simulate your return and find out how much your apartment can generate.<\/p>\n  <\/header>\n\n  <!-- Banner de Confirmaci\u00f3n Din\u00e1mica -->\n  <div class=\"unit-loaded-banner\" id=\"unitLoadedBanner\">\n    <div class=\"banner-icon\">&#10003;<\/div>\n    <div class=\"banner-text\" id=\"unitLoadedText\">Information loaded successfully.<\/div>\n  <\/div>\n\n  <div class=\"roi-main-grid\">\n\n    <!-- LEFT: Inputs -->\n    <div class=\"controls-column\">\n\n      <!-- Card 1: Unit Selection -->\n      <div class=\"ui-card\">\n        <div class=\"ui-card-title\">\n          <span>Unit Selection<\/span>\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#A09368\" stroke-width=\"2\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"><\/path><\/svg>\n        <\/div>\n        <p class=\"ui-card-subtitle\">Choose the model you're interested in.<\/p>\n\n        <div class=\"form-grid cols-3\">\n          <div class=\"form-field\">\n            <label for=\"fModelo\">Model<\/label>\n            <select id=\"fModelo\">\n              <option value=\"\">Select<\/option>\n            <\/select>\n          <\/div>\n          <div class=\"form-field\">\n            <label for=\"fUnidad\">Unit<\/label>\n            <select id=\"fUnidad\" disabled>\n              <option value=\"\">Select model<\/option>\n            <\/select>\n          <\/div>\n          <div class=\"form-field\">\n            <label>Rental Type<\/label>\n            <div class=\"segmented-switch\" id=\"fModalidad\">\n              <button type=\"button\" data-val=\"AIRBNB\" class=\"active\">Airbnb<\/button>\n              <button type=\"button\" data-val=\"LARGO PLAZO\">Long Term<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Card 2: Property Specs -->\n      <div class=\"ui-card\">\n        <div class=\"ui-card-title\">\n          <span>Property Details<\/span>\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#A09368\" stroke-width=\"2\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"><\/line><line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"><\/line><\/svg>\n        <\/div>\n        <p class=\"ui-card-subtitle\">Official parameters automatically configured per unit.<\/p>\n\n        <div class=\"form-grid cols-3\">\n          <div class=\"form-field readonly\">\n            <label>Area (m\u00b2)<\/label>\n            <input type=\"text\" id=\"oM2\" readonly value=\"\u2014\">\n          <\/div>\n          <div class=\"form-field readonly\">\n            <label>Price per m\u00b2<\/label>\n            <input type=\"text\" id=\"oPrecioM2\" readonly value=\"\u2014\">\n          <\/div>\n          <div class=\"form-field readonly\">\n            <label>Total Price<\/label>\n            <input type=\"text\" id=\"oPrecio\" readonly value=\"\u2014\">\n          <\/div>\n        <\/div>\n\n        <div class=\"form-grid cols-3\">\n          <div class=\"form-field readonly\">\n            <label>Maintenance (Month)<\/label>\n            <input type=\"text\" id=\"oHOA\" readonly value=\"\u2014\">\n          <\/div>\n          <div class=\"form-field readonly\">\n            <label>Annual Property Tax<\/label>\n            <input type=\"text\" id=\"oPredial\" readonly value=\"\u2014\">\n          <\/div>\n          <div class=\"form-field\">\n            <label for=\"iPlusvalia\">Annual Appreciation<\/label>\n            <div class=\"input-wrapper\">\n              <input type=\"number\" id=\"iPlusvalia\" value=\"7.0\" step=\"0.1\" min=\"0\" class=\"has-suffix\">\n              <span class=\"suffix\">%<\/span>\n            <\/div>\n            <span class=\"field-hint\">Annual estimate<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Card 3: Rental Parameters -->\n      <div class=\"ui-card\">\n        <div class=\"ui-card-title\">\n          <span>Rental & Operating Variables<\/span>\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#A09368\" stroke-width=\"2\"><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"><\/line><path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"><\/path><\/svg>\n        <\/div>\n        <p class=\"ui-card-subtitle\">Adjust rates, management fees and INPC increase.<\/p>\n\n        <!-- Bloque Airbnb -->\n        <div id=\"fieldsAirbnb\" class=\"form-grid cols-2\">\n          <div class=\"form-field\">\n            <label for=\"iAirbnbNoche\">Airbnb Rate \/ Night<\/label>\n            <div class=\"input-wrapper\">\n              <input type=\"number\" id=\"iAirbnbNoche\" value=\"0\" step=\"50\" min=\"0\" class=\"has-suffix\">\n              <span class=\"suffix\">MXN<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"form-field\">\n            <label for=\"iAirbnbPct\">Airbnb Admin \/ Operation<\/label>\n            <div class=\"input-wrapper\">\n              <input type=\"number\" id=\"iAirbnbPct\" value=\"6.0\" step=\"0.1\" min=\"0\" class=\"has-suffix\">\n              <span class=\"suffix\">%<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Bloque Largo Plazo -->\n        <div id=\"fieldsLargoPlazo\" class=\"form-grid cols-2\" style=\"display:none;\">\n          <div class=\"form-field\">\n            <label for=\"iLPMensual\">Long-Term Rent \/ Month<\/label>\n            <div class=\"input-wrapper\">\n              <input type=\"number\" id=\"iLPMensual\" value=\"0\" step=\"500\" min=\"0\" class=\"has-suffix\">\n              <span class=\"suffix\">MXN<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"form-field\">\n            <label for=\"iLPPct\">Long-Term Admin<\/label>\n            <div class=\"input-wrapper\">\n              <input type=\"number\" id=\"iLPPct\" value=\"3.0\" step=\"0.1\" min=\"0\" class=\"has-suffix\">\n              <span class=\"suffix\">%<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"form-grid cols-2\">\n          <div class=\"form-field\">\n            <label for=\"iINPC\">Annual INPC Increase<\/label>\n            <div class=\"input-wrapper\">\n              <input type=\"number\" id=\"iINPC\" value=\"4.0\" step=\"0.1\" min=\"0\" class=\"has-suffix\">\n              <span class=\"suffix\">%<\/span>\n            <\/div>\n            <span class=\"field-hint\">Annual inflationary adjustment to rents<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n    <!-- RIGHT: Results Sticky -->\n    <div class=\"results-column\">\n      <div class=\"results-card-sticky\" id=\"resultsSummaryCard\">\n        <div class=\"results-header-tag\">Financial Summary<\/div>\n        \n        <!-- T\u00edtulo principal a 45px con interlineado estrecho y espaciado de lectura -->\n        <h3>Return on your investment<\/h3>\n        <p class=\"sub\">Projected performance based on net cash flows and appreciation.<\/p>\n\n        <!-- Detalle de unidad seleccionada -->\n        <div class=\"unit-meta-badge\" id=\"rUnitMetaDetails\">\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path><polyline points=\"14 2 14 8 20 8\"><\/polyline><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line><polyline points=\"10 9 9 9 8 9\"><\/polyline><\/svg>\n          <span id=\"rUnitMetaText\">Select an apartment<\/span>\n          <span class=\"badge-reservado\" id=\"rReservedBadge\" style=\"display:none;\">Reserved Unit<\/span>\n        <\/div>\n\n        <!-- HERO: TIEMPO DE RECUPERACI\u00d3N -->\n        <div class=\"stat-hero\">\n          <div class=\"stat-hero-number\" id=\"rRecoveryHero\">\u2014<\/div>\n          <div class=\"stat-hero-label\">Total Recovery Time<\/div>\n          <div class=\"stat-hero-desc\">100% return of your capital (Net cash flows + Accumulated appreciation)<\/div>\n        <\/div>\n\n        <!-- MATRIZ DE RENDIMIENTOS -->\n        <div class=\"stat-matrix\">\n          \n          <!-- Fila 1: Inversi\u00f3n Total -->\n          <div class=\"stat-cell full-width\">\n            <div class=\"stat-cell-value\" id=\"rInversion\">\u2014<\/div>\n            <div class=\"stat-cell-label\">Total Investment<\/div>\n            <div class=\"discount-note\" id=\"rDiscountNote\" style=\"display:none;\"><\/div>\n          <\/div>\n\n          <!-- Fila 2: ROI RENTA y ROI TOTAL -->\n          <div class=\"stat-row-2cols\">\n            <div class=\"stat-cell\">\n              <div class=\"stat-cell-value\" id=\"rROIRenta\">\u2014<\/div>\n              <div class=\"stat-cell-label\">ROI from Rent<\/div>\n              <div class=\"stat-cell-note\">*Without appreciation.<\/div>\n            <\/div>\n            <div class=\"stat-cell\">\n              <div class=\"stat-cell-value\" id=\"rROI1\" style=\"color:var(--ch-gold);\">\u2014<\/div>\n              <div class=\"stat-cell-label\">Total ROI (Year 1)<\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Fila 3: INGRESO NETO y PLUSVAL\u00cdA ESTIMADA -->\n          <div class=\"stat-row-2cols\">\n            <div class=\"stat-cell\">\n              <div class=\"stat-cell-value\" id=\"rIngresoNeto\">\u2014<\/div>\n              <div class=\"stat-cell-label\">Net Income (Year 1)<\/div>\n              <div class=\"stat-cell-note\">*Net of maintenance, property tax and management expenses.<\/div>\n            <\/div>\n            <div class=\"stat-cell\">\n              <div class=\"stat-cell-value\" id=\"rPlusvalia\">\u2014<\/div>\n              <div class=\"stat-cell-label\">Estimated Annual Appreciation (Year 1)<\/div>\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n        <!-- Timeline -->\n        <div class=\"timeline-container\">\n          <div class=\"timeline-title\">\n            <span>Amortization Progress<\/span>\n            <span id=\"timelinePctTag\" style=\"color:var(--ch-gold);\">0%<\/span>\n          <\/div>\n\n          <div class=\"progress-track\">\n            <div class=\"progress-fill\" id=\"tideFill\"><\/div>\n            <div class=\"progress-pointer\" id=\"tideMarker\" style=\"left:0%\"><\/div>\n          <\/div>\n\n          <div class=\"timeline-milestones\">\n            <span>Year 1<\/span>\n            <span>Year 5<\/span>\n            <span>Year 10<\/span>\n            <span>Year 15<\/span>\n            <span>Year 20<\/span>\n          <\/div>\n\n          <div class=\"recovery-summary\" id=\"recoveryLine\">\n            Select an apartment to calculate the return.\n          <\/div>\n        <\/div>\n\n        <div class=\"cta-buttons-group\">\n          <a href=\"#tableSection\" class=\"cta-button\">\n            <span>View 20-Year Breakdown<\/span>\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n          <\/a>\n\n          <a href=\"#\" target=\"_blank\" class=\"cta-button cta-button-whatsapp\" id=\"btnWhatsappROI\">\n            <span id=\"btnWhatsappText\">Talk to an Advisor About This Unit<\/span>\n          <\/a>\n\n          <!-- BOT\u00d3N SUTIL PARA COMPARTIR ENLACE DIRECTO -->\n          <button type=\"button\" class=\"share-link-subtle\" id=\"btnShareUnitROI\">\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"><\/path>\n              <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"><\/path>\n            <\/svg>\n            <span id=\"shareBtnText\">Share this unit's calculation<\/span>\n          <\/button>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <!-- TABLE -->\n  <div class=\"table-card\" id=\"tableSection\">\n    <div class=\"table-card-head\">\n      <h2>20-Year Financial Projection<\/h2>\n      <p style=\"font-size:13px; color:var(--ch-text-muted);\">Historical and accumulated evolution of cash flows, earned appreciation and amortization status.<\/p>\n    <\/div>\n\n    <div class=\"table-responsive\" id=\"tableWrap\">\n      <div class=\"empty-placeholder\">\n        <h4>No unit selected<\/h4>\n        <p>Select a model and apartment above to project the table.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <p class=\"roi-disclaimer\">\n    * CityHa\u00fcs. The projections shown are approximations for illustrative purposes and do not constitute a contractual guarantee.\n  <\/p>\n\n<\/div>\n\n<script>\n(function(){\n  \"use strict\";\n\n  var UNITS = [\n    [\"AQUA\",\"401\",106.63,67472,7194539.36,5331.5,2500,44000,4250],[\"AQUA\",\"403\",116.73,67472,7876006.56,5836.5,2800,45000,4500],[\"AQUA\",\"405\",114.51,63263,7244246.13,5725.5,2500,42000,4500],[\"AQUA\",\"407\",104.62,63270,6619307.4,5231,2300,41000,4150],\n    [\"AQUA\",\"501\",106.63,68829,7339236.27,5331.5,2650,45000,4250],[\"AQUA\",\"503\",116.73,68822,8033592.06,5836.5,3000,46500,4500],[\"AQUA\",\"505\",114.51,64523,7388528.73,5725.5,2600,42500,4500],[\"AQUA\",\"507\",104.65,68829,7202954.85,5232.5,2400,41500,4150],\n    [\"AQUA\",\"601\",106.63,70207,7486172.41,5331.5,2800,46000,4250],[\"AQUA\",\"603\",116.73,75741.12,8841260.9376,5836.5,3200,48000,4500],[\"AQUA\",\"605\",114.51,71338.75,8169000,5725.5,2700,43000,4500,12,\"RESERVADO\"],[\"AQUA\",\"607\",104.65,75741.12,7926308.208,5232.5,2500,42000,4150],\n    [\"AQUA\",\"701\",106.6,72255.94,7702483.204,5330,2950,47000,4250],[\"AQUA\",\"703\",116.73,71604,8358334.92,5836.5,3400,49500,4500],[\"AQUA\",\"705\",114.51,67128,7686827.28,5725.5,2800,43500,4500],[\"AQUA\",\"707\",104.62,67132,7023349.84,5231,2600,42500,4150],\n    [\"AQUA\",\"801\",106.6,73801.0629,7867193.30514,5330,3100,48000,4250],[\"AQUA\",\"803\",116.73,68475,7993086.75,5836.5,3600,51000,4500],[\"AQUA\",\"805\",114.51,68473,7840843.23,5725.5,2900,44000,4500],[\"AQUA\",\"807\",104.65,68475,7165908.75,5232.5,2700,43000,4150],\n    [\"AQUA\",\"901\",106.63,74499,7943828.37,5331.5,3250,49000,4250],[\"AQUA\",\"903\",116.73,74491,8695334.43,5836.5,2600,52500,4500],[\"AQUA\",\"905\",114.51,69841,7997492.91,5725.5,3000,44500,4500],[\"AQUA\",\"907\",104.62,69849,7307602.38,5231,2800,43500,4150],\n    [\"AQUA\",\"1001\",106.63,75984,8102173.92,5331.5,3400,50000,4250],[\"AQUA\",\"1003\",116.73,75984,8869612.32,5836.5,3800,54000,4500],[\"AQUA\",\"1005\",114.51,71240,8157692.4,5725.5,3100,45000,4500],[\"AQUA\",\"1007\",104.62,71245,7453651.9,5231,2900,44000,4150],\n    [\"AQUA\",\"1101\",106.63,77503,8264144.89,5331.5,3550,51000,4250],[\"AQUA\",\"1103\",116.73,77499,9046458.27,5836.5,4000,55500,4500],[\"AQUA\",\"1105\",114.51,72661,8320411.11,5725.5,3200,45500,4500],[\"AQUA\",\"1107\",104.62,72667,7602421.54,5231,3000,44500,4150],\n    [\"AQUA\",\"1201\",106.63,94091.72,10033000,5331.5,3700,57000,4500,12,\"RESERVADO\"],[\"AQUA\",\"1203\",116.73,89336.5,10428249.645,5836.5,4200,52000,4250],[\"AQUA\",\"1205\",114.51,74114,8486794.14,5725.5,3300,46000,4500],[\"AQUA\",\"1207\",104.62,74122,7754643.64,5231,3100,45000,4150],\n    [\"CORAL\",\"1401\",162.72,80619,13118323.68,8136,4800,63000,4900],[\"CORAL\",\"1403\",177.41,87385.15,15503000,8870.5,5200,68000,5000,12,\"RESERVADO\"],[\"CORAL\",\"1404\",173.42,75589,13108644.38,8671,4400,58000,5000],[\"CORAL\",\"1406\",159.31,75583,12041127.73,7965.5,4100,55000,4750],\n    [\"DELMAR\",\"404\",126.97,60250,7649942.5,6348.5,2800,45000,4750],[\"DELMAR\",\"408\",119.78,60252,7216984.56,5989,2600,44000,4600],[\"DELMAR\",\"504\",126.97,61449,7802179.53,6348.5,2950,46000,4750],[\"DELMAR\",\"508\",119.78,61457,7361319.46,5989,2700,45000,4600],\n    [\"DELMAR\",\"604\",126.97,62682,7958733.54,6348.5,3100,47000,4750],[\"DELMAR\",\"608\",119.78,62683,7508169.74,5989,2800,46000,4600],[\"DELMAR\",\"704\",126.97,63930,8117192.1,6348.5,3250,48000,4750],[\"DELMAR\",\"708\",119.78,63932,7657774.96,5989,2900,47000,4600],\n    [\"DELMAR\",\"804\",126.97,70358,8933355.26,6348.5,3400,49000,4750],[\"DELMAR\",\"808\",119.78,70360,8427720.8,5989,3000,48000,4600],[\"DELMAR\",\"904\",126.97,66515,8445409.55,6348.5,3550,50000,4750],[\"DELMAR\",\"908\",119.78,72098.85,8636000,5989,2600,49000,4600,12,\"RESERVADO\"],\n    [\"DELMAR\",\"1004\",126.97,67846,8614406.62,6348.5,3700,51000,4750],[\"DELMAR\",\"1008\",119.78,67848,8126833.44,5989,3100,50000,4600],[\"DELMAR\",\"1104\",126.97,69197,8785943.09,6348.5,3850,52000,4750],[\"DELMAR\",\"1108\",119.78,69200,8288776,5989,3200,51000,4600],\n    [\"DELMAR\",\"1204\",126.97,67326,8548382.22,6348.5,4000,53000,4750],[\"DELMAR\",\"1208\",119.78,70589,8455150.42,5989,3300,52000,4600],[\"MARINA\",\"402\",100.2,64771,6490054.2,5010,2200,41000,4000],[\"MARINA\",\"406\",101.69,69875,7105588.75,5084.5,2250,40000,4100],\n    [\"MARINA\",\"502\",100.2,66071,6620314.2,5010,2500,42000,4000],[\"MARINA\",\"506\",101.69,66071,6718759.99,5084.5,2350,40500,4100],[\"MARINA\",\"602\",100.2,67626,6776125.2,5010,2800,43000,4000],[\"MARINA\",\"606\",101.69,62688,6374742.72,5084.5,2450,41000,4100],\n    [\"MARINA\",\"702\",100.2,68979,6911695.8,5010,3100,44000,4000],[\"MARINA\",\"706\",101.69,63943,6502363.67,5084.5,2550,41500,4100],[\"MARINA\",\"802\",100.2,70358,7049871.6,5010,3400,45000,4000],[\"MARINA\",\"806\",101.69,65224,6632628.56,5084.5,2650,42000,4100],\n    [\"MARINA\",\"902\",100.2,68214,6835042.8,5010,3700,46000,4000],[\"MARINA\",\"906\",101.69,66522,6764622.18,5084.5,2750,42500,4100],[\"MARINA\",\"1002\",100.2,70355,7049571,5010,4000,47000,4000],[\"MARINA\",\"1006\",101.69,67855,6900174.95,5084.5,2850,43000,4100],\n    [\"MARINA\",\"1102\",100.2,74397,7454579.4,5010,4300,48000,4000],[\"MARINA\",\"1106\",101.69,69213,7038269.97,5084.5,2950,43500,4100],[\"MARINA\",\"1202\",100.2,72642,7278728.4,5010,4600,49000,4000],[\"MARINA\",\"1206\",101.69,70589,7178195.41,5084.5,3050,44000,4100],\n    [\"PERLA\",\"1402\",112.63,77681.02,8749213.2826,5631.5,4800,52000,4500],[\"PERLA\",\"1405\",112.11,72000,8071920,5605.5,3250,48000,4500],\n    [\"ROOFTOP\",\"15\",0,0,13066000,0,0,0,0,12]\n  ];\n\n  UNITS = UNITS.filter(function(r){ return r[0] !== 'ROOFTOP'; }); \/\/ Oculta temporalmente el modelo ROOFTOP\n\n  var byModelo = {};\n  UNITS.forEach(function(r){\n    if(!byModelo[r[0]]) byModelo[r[0]] = [];\n    byModelo[r[0]].push(r);\n  });\n  var modelos = Object.keys(byModelo).sort();\n\n  var fModelo = document.getElementById('fModelo');\n  var fUnidad = document.getElementById('fUnidad');\n  var modalidadBtns = document.querySelectorAll('#fModalidad button');\n  var modalidad = 'AIRBNB';\n\n  var fieldsAirbnb = document.getElementById('fieldsAirbnb');\n  var fieldsLargoPlazo = document.getElementById('fieldsLargoPlazo');\n\n  modelos.forEach(function(m){\n    var opt = document.createElement('option');\n    opt.value = m;\n    opt.textContent = m;\n    fModelo.appendChild(opt);\n  });\n\n  function populateUnidades(modelo){\n    fUnidad.innerHTML = '';\n    if(!modelo){\n      var opt0 = document.createElement('option');\n      opt0.value=''; opt0.textContent='Select model';\n      fUnidad.appendChild(opt0);\n      fUnidad.disabled = true;\n      return;\n    }\n    fUnidad.disabled = false;\n    var opt = document.createElement('option');\n    opt.value=''; opt.textContent='Select unit';\n    fUnidad.appendChild(opt);\n    byModelo[modelo].forEach(function(r){\n      var o = document.createElement('option');\n      o.value = r[1];\n      o.textContent = r[1];\n      fUnidad.appendChild(o);\n    });\n  }\n\n  fModelo.addEventListener('change', function(){\n    populateUnidades(fModelo.value);\n    if(fModelo.value && byModelo[fModelo.value] && byModelo[fModelo.value].length > 0) {\n      var firstUnit = byModelo[fModelo.value][0];\n      fUnidad.value = firstUnit[1];\n      applyUnitDefaults(firstUnit);\n    } else {\n      applyUnitDefaults(null);\n    }\n    recalc();\n  });\n\n  fUnidad.addEventListener('change', function(){\n    var row = findRow(fModelo.value, fUnidad.value);\n    applyUnitDefaults(row);\n    recalc();\n  });\n\n  modalidadBtns.forEach(function(btn){\n    btn.addEventListener('click', function(){\n      modalidadBtns.forEach(function(b){ b.classList.remove('active'); });\n      btn.classList.add('active');\n      modalidad = btn.getAttribute('data-val');\n\n      if (modalidad === 'AIRBNB') {\n        fieldsAirbnb.style.display = 'grid';\n        fieldsLargoPlazo.style.display = 'none';\n      } else {\n        fieldsAirbnb.style.display = 'none';\n        fieldsLargoPlazo.style.display = 'grid';\n      }\n\n      recalc();\n    });\n  });\n\n  function findRow(modelo, unidad){\n    if(!modelo || !unidad) return null;\n    var list = byModelo[modelo] || [];\n    for(var i=0;i<list.length;i++){\n      if(String(list[i][1]) === String(unidad)) return list[i];\n    }\n    return null;\n  }\n\n  var oM2 = document.getElementById('oM2');\n  var oPrecioM2 = document.getElementById('oPrecioM2');\n  var oPrecio = document.getElementById('oPrecio');\n  var oHOA = document.getElementById('oHOA');\n  var oPredial = document.getElementById('oPredial');\n\n  var iPlusvalia = document.getElementById('iPlusvalia');\n  var iAirbnbNoche = document.getElementById('iAirbnbNoche');\n  var iAirbnbPct = document.getElementById('iAirbnbPct');\n  var iLPMensual = document.getElementById('iLPMensual');\n  var iLPPct = document.getElementById('iLPPct');\n  var iINPC = document.getElementById('iINPC');\n\n  var currentPrecio = null;\n  var currentPrecioComercial = 0;\n  var currentDesc = 0;\n  var currentEstado = '';\n  var currentHOA = 0;\n  var currentPredial = 0;\n  var currentModelName = '';\n  var currentUnitNum = '';\n\n  function applyUnitDefaults(row){\n    var rUnitMetaText = document.getElementById('rUnitMetaText');\n    var rDiscountNote = document.getElementById('rDiscountNote');\n\n    if(!row){\n      oM2.value = '\u2014'; oPrecioM2.value = '\u2014'; oPrecio.value = '\u2014';\n      oHOA.value = '\u2014'; oPredial.value = '\u2014';\n      iAirbnbNoche.value = 0; iLPMensual.value = 0;\n      currentPrecio = null; currentPrecioComercial = 0; currentDesc = 0; currentEstado = '';\n      currentHOA = 0; currentPredial = 0;\n      currentModelName = ''; currentUnitNum = '';\n      if(rDiscountNote){ rDiscountNote.style.display = 'none'; rDiscountNote.innerHTML = ''; }\n      if(rUnitMetaText) rUnitMetaText.textContent = 'Select an apartment';\n      return;\n    }\n    var desc = parseFloat(row[9]) || 0;\n    var precioComercial = row[4];\n    var precioFinal = precioComercial * (1 - desc\/100);\n\n    oM2.value = row[2] ? (fmtNum(row[2], 2) + \" m\u00b2\") : '\u2014';\n    oPrecioM2.value = row[2] ? fmtMoney(desc ? (precioFinal \/ row[2]) : row[3]) : '\u2014';\n    oPrecio.value = fmtMoney(precioFinal);\n    oHOA.value = row[5] ? fmtMoney(row[5]) : '\u2014';\n    oPredial.value = row[8] ? fmtMoney(row[8]) : '\u2014';\n    iAirbnbNoche.value = row[6];\n    iLPMensual.value = row[7];\n    currentPrecio = precioFinal;\n    currentPrecioComercial = precioComercial;\n    currentDesc = desc;\n    currentEstado = row[10] || '';\n    currentHOA = row[5];\n    currentPredial = row[8];\n    currentModelName = row[0];\n    currentUnitNum = row[1];\n\n    if(rDiscountNote){\n      if(desc > 0){\n        rDiscountNote.style.display = '';\n        rDiscountNote.innerHTML = 'Commercial price <span class=\"dn-old\">' + fmtMoney(precioComercial) + '<\/span><span class=\"dn-badge\">Discount ' + fmtNum(desc, 0) + '%<\/span>';\n      } else {\n        rDiscountNote.style.display = 'none';\n        rDiscountNote.innerHTML = '';\n      }\n    }\n\n    var nivel = Math.floor(parseInt(row[1], 10) \/ 100);\n    var nivelStr = nivel > 0 ? (', Level ' + nivel) : '';\n    var metaStr = 'Model ' + row[0].charAt(0).toUpperCase() + row[0].slice(1).toLowerCase() +\n                  nivelStr + ', unit ' + row[1] + '.';\n    if(rUnitMetaText) rUnitMetaText.textContent = metaStr;\n  }\n\n  [iPlusvalia, iAirbnbNoche, iAirbnbPct, iLPMensual, iLPPct, iINPC].forEach(function(el){\n    ['input', 'change', 'keyup'].forEach(function(evt){\n      el.addEventListener(evt, recalc);\n    });\n  });\n\n  var moneyFmt = new Intl.NumberFormat('es-MX', {style:'currency', currency:'MXN', maximumFractionDigits:0});\n  var pctFmt1 = new Intl.NumberFormat('es-MX', {style:'percent', minimumFractionDigits:1, maximumFractionDigits:1});\n  var pctFmt2 = new Intl.NumberFormat('es-MX', {style:'percent', minimumFractionDigits:2, maximumFractionDigits:2});\n\n  function fmtMoney(n){ return moneyFmt.format(n||0) + ' MXN'; }\n  function fmtNum(n, d){ return (n||0).toLocaleString('es-MX', {minimumFractionDigits:d, maximumFractionDigits:d}); }\n  function fmtPct1(n){ return pctFmt1.format(n||0); }\n  function fmtPct2(n){ return pctFmt2.format(n||0); }\n\n  function recalc(){\n    var tableWrap = document.getElementById('tableWrap');\n    var recoveryLine = document.getElementById('recoveryLine');\n    var tideFill = document.getElementById('tideFill');\n    var tideMarker = document.getElementById('tideMarker');\n    var timelinePctTag = document.getElementById('timelinePctTag');\n    var btnWp = document.getElementById('btnWhatsappROI');\n    var rRecoveryHero = document.getElementById('rRecoveryHero');\n\n    if(currentPrecio === null){\n      ['rROI1','rInversion','rIngresoNeto','rROIRenta','rPlusvalia'].forEach(function(id){\n        document.getElementById(id).textContent = '\u2014';\n      });\n      rRecoveryHero.textContent = '\u2014';\n      recoveryLine.innerHTML = 'Select an apartment to calculate the return.';\n      tideFill.style.width = '0%';\n      tideMarker.style.left = '0%';\n      timelinePctTag.textContent = '0%';\n      tableWrap.innerHTML = '<div class=\"empty-placeholder\"><h4>No unit selected<\/h4><p>Select a model and apartment above to project the table.<\/p><\/div>';\n      btnWp.href = 'https:\/\/wa.me\/5213222786206';\n      var reservedBadgeEmpty = document.getElementById('rReservedBadge');\n      if(reservedBadgeEmpty) reservedBadgeEmpty.style.display = 'none';\n      var btnTxtEmpty = document.getElementById('btnWhatsappText');\n      if(btnTxtEmpty) btnTxtEmpty.textContent = 'Talk to an Advisor About This Unit';\n      return;\n    }\n\n    var inversion = currentPrecio;\n    var plusvaliaPct = (parseFloat(iPlusvalia.value)||0)\/100;\n    var airbnbNoche = parseFloat(iAirbnbNoche.value)||0;\n    var airbnbPct = (parseFloat(iAirbnbPct.value)||0)\/100;\n    var lpMensual = parseFloat(iLPMensual.value)||0;\n    var lpPct = (parseFloat(iLPPct.value)||0)\/100;\n    var inpcPct = (parseFloat(iINPC.value)||0)\/100;\n    var hoaMensual = currentHOA;\n    var predialAnual = currentPredial;\n\n    var ingresoNeto1;\n    if(modalidad === 'AIRBNB'){\n      ingresoNeto1 = (airbnbNoche * 365) * (1 - airbnbPct) - (hoaMensual * 12) - predialAnual;\n    } else {\n      ingresoNeto1 = (lpMensual * 12) * (1 - lpPct) - (hoaMensual * 12) - predialAnual;\n    }\n\n    var roiRenta = inversion ? (ingresoNeto1 \/ inversion) : 0;\n    var plusvalia1 = inversion * plusvaliaPct;\n    var roiTotal1 = inversion ? ((ingresoNeto1 + plusvalia1) \/ inversion) : 0;\n\n    document.getElementById('rInversion').textContent = fmtMoney(inversion);\n    document.getElementById('rIngresoNeto').textContent = fmtMoney(ingresoNeto1);\n    document.getElementById('rROIRenta').textContent = fmtPct2(roiRenta);\n    document.getElementById('rPlusvalia').textContent = fmtMoney(plusvalia1);\n    document.getElementById('rROI1').textContent = fmtPct1(roiTotal1);\n\n    var esReservado = (currentEstado === 'RESERVADO');\n    var wpMsg = esReservado\n      ? 'Hello! I am interested in the reserved unit ' + currentModelName + ' ' + currentUnitNum + ' at CityHa\u00fcs. Could you share more information about it?'\n      : 'Hello! I just checked the investment simulation for unit ' + currentModelName + ' ' + currentUnitNum + ' at CityHa\u00fcs and I would like to receive more details and schedule a call.';\n    btnWp.href = 'https:\/\/wa.me\/5213222786206?text=' + encodeURIComponent(wpMsg);\n\n    var reservedBadge = document.getElementById('rReservedBadge');\n    if(reservedBadge) reservedBadge.style.display = esReservado ? 'inline-flex' : 'none';\n    var btnTxt = document.getElementById('btnWhatsappText');\n    if(btnTxt) btnTxt.textContent = esReservado ? 'Request Information About This Unit' : 'Talk to an Advisor About This Unit';\n\n    var years = [];\n    var valorInicial, ingresoNeto, plusvalia, valorEstimado;\n    var flujoAcum = 0, plusvaliaAcum = 0;\n\n    for(var n=1; n<=20; n++){\n      if(n === 1){\n        valorInicial = inversion;\n        ingresoNeto = ingresoNeto1;\n      } else {\n        valorInicial = years[n-2].valorEstimado;\n        ingresoNeto = years[n-2].ingresoNeto * (1 + inpcPct);\n      }\n      plusvalia = valorInicial * plusvaliaPct;\n      valorEstimado = valorInicial + plusvalia;\n      flujoAcum += ingresoNeto;\n      plusvaliaAcum += plusvalia;\n      var retornoAcumRenta = inversion ? (flujoAcum \/ inversion) : 0;\n      var roiAcum = inversion ? ((flujoAcum + plusvaliaAcum) \/ inversion) : 0;\n      var recupero = (flujoAcum >= inversion) || ((flujoAcum + plusvaliaAcum) >= inversion);\n\n      years.push({\n        n: n,\n        valorInicial: valorInicial,\n        ingresoNeto: ingresoNeto,\n        plusvalia: plusvalia,\n        valorEstimado: valorEstimado,\n        flujoAcum: flujoAcum,\n        plusvaliaAcum: plusvaliaAcum,\n        retornoAcumRenta: retornoAcumRenta,\n        roiAcum: roiAcum,\n        recupero: recupero\n      });\n    }\n\n    var recoveryYearIdx = -1;\n    for(var i=0; i<years.length; i++){\n      if(years[i].roiAcum >= 1){ recoveryYearIdx = years[i].n; break; }\n    }\n\n    var recoveryText = '';\n    var recoveryFracYear = 0;\n    if(recoveryYearIdx > 0){\n      var prevTotal = recoveryYearIdx === 1 ? 0 : (years[recoveryYearIdx-2].flujoAcum + years[recoveryYearIdx-2].plusvaliaAcum);\n      var currTotal = years[recoveryYearIdx-1].flujoAcum + years[recoveryYearIdx-1].plusvaliaAcum;\n      var increment = currTotal - prevTotal;\n      var faltante = inversion - prevTotal;\n      var fraction = increment === 0 ? 0 : (faltante \/ increment);\n      recoveryFracYear = Math.max(0, Math.min(1, fraction));\n      var monthsRaw = Math.round(fraction * 12);\n      var yearsFinal = recoveryYearIdx - 1 + (monthsRaw >= 12 ? 1 : 0);\n      var monthsFinal = monthsRaw >= 12 ? 0 : monthsRaw;\n      recoveryText = yearsFinal + ' ' + (yearsFinal === 1 ? 'Year' : 'Years') + ', ' + monthsFinal + ' ' + (monthsFinal === 1 ? 'Month' : 'Months');\n    }\n\n    if(recoveryYearIdx > 0){\n      rRecoveryHero.textContent = recoveryText;\n      recoveryLine.innerHTML = 'You recover 100% of your investment in <strong>' + recoveryText + '<\/strong> considering the estimated rental cash flow (365 continuous days) and annual appreciation.';\n      var posPct = Math.min(100, Math.max(0, (((recoveryYearIdx - 1 + recoveryFracYear) \/ 20) * 100)));\n      tideFill.style.width = posPct + '%';\n      tideMarker.style.left = posPct + '%';\n      timelinePctTag.textContent = posPct.toFixed(0) + '% of the period';\n    } else {\n      rRecoveryHero.textContent = '> 20 Years';\n      recoveryLine.innerHTML = 'It is not fully amortized within the first <strong>20 years<\/strong> under these variables.';\n      tideFill.style.width = '100%';\n      tideMarker.style.left = '100%';\n      timelinePctTag.textContent = '> 20 Years';\n    }\n\n    renderTable(years, recoveryYearIdx);\n  }\n\n  function renderTable(years, recoveryYearIdx){\n    var html = '<table class=\"ch-table\"><thead><tr>' +\n      '<th>Year<\/th><th>Initial Value<\/th><th>Net Income<\/th><th>Appreciation Earned<\/th>' +\n      '<th>Asset Value<\/th><th>Accumulated Cash Flow<\/th><th>Accum. Appreciation<\/th>' +\n      '<th>Cash Flow Return<\/th><th>Total ROI<\/th><th>Amortized?<\/th>' +\n      '<\/tr><\/thead><tbody>';\n\n    years.forEach(function(y){\n      var isRecovered = (y.n === recoveryYearIdx);\n      html += '<tr' + (isRecovered ? ' class=\"row-recovered\"' : '') + '>' +\n        '<td>Year ' + y.n + '<\/td>' +\n        '<td>' + fmtMoney(y.valorInicial) + '<\/td>' +\n        '<td>' + fmtMoney(y.ingresoNeto) + '<\/td>' +\n        '<td>' + fmtMoney(y.plusvalia) + '<\/td>' +\n        '<td>' + fmtMoney(y.valorEstimado) + '<\/td>' +\n        '<td>' + fmtMoney(y.flujoAcum) + '<\/td>' +\n        '<td>' + fmtMoney(y.plusvaliaAcum) + '<\/td>' +\n        '<td>' + fmtPct1(y.retornoAcumRenta) + '<\/td>' +\n        '<td><strong style=\"color:var(--ch-navy);\">' + fmtPct1(y.roiAcum) + '<\/strong><\/td>' +\n        '<td><span class=\"badge-status ' + (y.recupero ? 'yes' : 'no') + '\">' + (y.recupero ? 'Recovered' : 'Pending') + '<\/span><\/td>' +\n        '<\/tr>';\n    });\n    html += '<\/tbody><\/table>';\n    document.getElementById('tableWrap').innerHTML = html;\n  }\n\n  \/\/ EVENTO PARA COMPARTIR ENLACE\n  var btnShare = document.getElementById('btnShareUnitROI');\n  var shareBtnText = document.getElementById('shareBtnText');\n\n  if(btnShare){\n    btnShare.addEventListener('click', function(){\n      if(!currentModelName || !currentUnitNum){\n        alert('Please select a unit first.');\n        return;\n      }\n\n      var shareUrl = new URL(window.location.href.split('?')[0]);\n      shareUrl.searchParams.set('origen', 'torre');\n      shareUrl.searchParams.set('modelo', currentModelName);\n      shareUrl.searchParams.set('unidad', currentUnitNum);\n\n      var finalUrl = shareUrl.toString();\n\n      if(navigator.clipboard && window.isSecureContext){\n        navigator.clipboard.writeText(finalUrl).then(function(){\n          showShareSuccess();\n        }).catch(function(){\n          fallbackCopy(finalUrl);\n        });\n      } else {\n        fallbackCopy(finalUrl);\n      }\n    });\n  }\n\n  function showShareSuccess(){\n    if(!shareBtnText) return;\n    var original = shareBtnText.textContent;\n    shareBtnText.textContent = '\u2713 Link copied to clipboard!';\n    shareBtnText.style.color = 'var(--ch-gold)';\n    setTimeout(function(){\n      shareBtnText.textContent = original;\n      shareBtnText.style.color = '';\n    }, 2500);\n  }\n\n  function fallbackCopy(text){\n    var tempInput = document.createElement('input');\n    tempInput.value = text;\n    document.body.appendChild(tempInput);\n    tempInput.select();\n    try {\n      document.execCommand('copy');\n      showShareSuccess();\n    } catch(err){\n      prompt('Copy this link to share:', text);\n    }\n    document.body.removeChild(tempInput);\n  }\n\n  function autoLoadFromUrl() {\n    try {\n      var params = new URLSearchParams(window.location.search);\n      var pOrigen = params.get('origen');\n      var pModelo = params.get('modelo') || params.get('modelo_interes');\n      var pUnidad = params.get('unidad') || params.get('unidad_interes');\n\n      if (pModelo) pModelo = pModelo.trim().toUpperCase();\n      if (pUnidad) pUnidad = pUnidad.trim();\n\n      var esDesdeTorre = (pOrigen === 'torre') &&\n                         pModelo && \n                         pUnidad && \n                         !pModelo.includes('{') && \n                         !pUnidad.includes('{') && \n                         byModelo[pModelo];\n\n      if (esDesdeTorre) {\n        var row = findRow(pModelo, pUnidad);\n        if (row) {\n          fModelo.value = pModelo;\n          populateUnidades(pModelo);\n          fUnidad.value = pUnidad;\n          \n          applyUnitDefaults(row);\n          recalc();\n          \n          var badge = document.getElementById('roiCustomBadge');\n          if (badge) {\n            badge.textContent = 'Simulation: ' + pModelo + ' ' + pUnidad;\n          }\n\n          var banner = document.getElementById('unitLoadedBanner');\n          var bannerText = document.getElementById('unitLoadedText');\n          if (banner && bannerText) {\n            bannerText.innerHTML = 'Information loaded successfully: <strong>Apt. ' + pModelo + ' ' + pUnidad + '<\/strong> (' + fmtNum(row[2], 2) + ' m\u00b2 \u00b7 ' + fmtMoney(row[4]) + ').';\n            banner.classList.add('active');\n          }\n\n          if (window.innerWidth <= 1024) {\n            setTimeout(function() {\n              var targetCard = document.getElementById('resultsSummaryCard');\n              if (targetCard) {\n                var yOffset = -25;\n                var y = targetCard.getBoundingClientRect().top + window.pageYOffset + yOffset;\n                window.scrollTo({ top: y, behavior: 'smooth' });\n              }\n            }, 400);\n          }\n          return;\n        }\n      }\n\n      applyUnitDefaults(null);\n      recalc();\n\n    } catch(e) {\n      console.warn('URL params parsing fallback', e);\n      applyUnitDefaults(null);\n      recalc();\n    }\n  }\n\n  autoLoadFromUrl();\n})();\n<\/script>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Financial Performance Discover the potential of your investment Simulate your return and find out how much your apartment can generate. &#10003; Information loaded successfully.\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_locale":"en_US","_original_post":"https:\/\/www.cityhaus.com.mx\/?page_id=2077","footnotes":""},"class_list":["post-2477","page","type-page","status-publish","hentry","en-US"],"_links":{"self":[{"href":"https:\/\/www.cityhaus.com.mx\/wp-json\/wp\/v2\/pages\/2477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cityhaus.com.mx\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.cityhaus.com.mx\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.cityhaus.com.mx\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cityhaus.com.mx\/wp-json\/wp\/v2\/comments?post=2477"}],"version-history":[{"count":35,"href":"https:\/\/www.cityhaus.com.mx\/wp-json\/wp\/v2\/pages\/2477\/revisions"}],"predecessor-version":[{"id":2609,"href":"https:\/\/www.cityhaus.com.mx\/wp-json\/wp\/v2\/pages\/2477\/revisions\/2609"}],"wp:attachment":[{"href":"https:\/\/www.cityhaus.com.mx\/wp-json\/wp\/v2\/media?parent=2477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}