const { useState, useMemo, useEffect, useRef } = React;
const { fmtMXN, PROPERTIES, BANCOS, calcBanco, calcCofinavit, calcInfonavit, calcConstruccion, CONSTRUCCION_RULES, calcTerreno, TERRENO_RULES, GASTOS_NOTARIALES_TERRENO_PCT } = window.CCV;

/* ---------------- Styles ---------------- */
const css = `
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px 80px; }
.topbar { position: sticky; top: 0; z-index: 40; background: oklch(0.99 0.004 290 / 0.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.topbar .inner { max-width: 1180px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: "Sora"; font-weight: 700; font-size: 17px; color: var(--ink); }
.hero { position: relative; height: 72vh; min-height: 480px; max-height: 720px; overflow: hidden; }
.hero-bg { position: absolute; inset: -3%; background-size: cover; background-position: 60% 40%; animation: heroZoom 24s ease-in-out infinite alternate; }
@media (max-width: 720px) { .hero-bg { background-position: 78% 40%; } }
@keyframes heroZoom { 0% { transform: scale(1); } 100% { transform: scale(1.07); } }
.hero-stripe { position: absolute; top: 0; right: 6%; width: 90px; height: 100%; background: linear-gradient(180deg, oklch(0.78 0.14 255), oklch(0.7 0.19 35)); transform: skewX(-9deg); opacity: 0.9; z-index: 1; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,6,20,0.12) 0%, rgba(10,6,20,0.02) 30%, rgba(8,5,16,0.5) 65%, rgba(8,5,16,0.92) 100%); z-index: 1; }
.hero-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 20px 44px; color: #fff; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.88 0.06 255); margin-bottom: 14px; }
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hero-title { font-family: "Sora"; font-weight: 800; font-size: clamp(32px, 5vw, 56px); line-height: 1.04; letter-spacing: -0.02em; max-width: 780px; text-wrap: balance; }
.hero-title .accent { color: oklch(0.78 0.14 255); }
.hero-sub { font-size: 17px; line-height: 1.55; color: oklch(0.9 0.01 290); max-width: 560px; margin-top: 16px; }
.hero-cities { display: flex; gap: 22px; margin-top: 28px; flex-wrap: wrap; }
.hero-city { font-family: "Sora"; font-size: 13.5px; font-weight: 700; color: oklch(0.72 0.02 290); position: relative; padding-bottom: 6px; }
.hero-city.on { color: #fff; }
.hero-city.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: oklch(0.78 0.14 255); border-radius: 2px; }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.precal-banner { max-width: 1180px; margin: 22px auto 0; padding: 18px 24px; background: var(--purple-soft); border: 1px solid oklch(0.85 0.05 255); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.precal-banner .pb-t { font-family: "Sora"; font-weight: 700; font-size: 15px; color: var(--purple-deep); }
.precal-banner .pb-s { font-size: 13px; color: var(--ink-soft); font-weight: 600; margin-top: 3px; }
.precal-banner .pb-btn { font-family: "Sora"; font-weight: 800; font-size: 13.5px; background: var(--purple); color: #fff; padding: 11px 18px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
.hero-btn { font-family: "Sora"; font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 14px; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.hero-btn.primary { background: #fff; color: oklch(0.3 0.16 255); }
.hero-btn.ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1.5px solid rgba(255,255,255,0.35); backdrop-filter: blur(6px); }
.brand .mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(150deg, var(--purple), var(--purple-deep)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px; box-shadow: 0 4px 14px oklch(0.5 0.2 255 / 0.35); }
.brand small { display: block; font-family: "Manrope"; font-weight: 600; font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; }
.nav-cta { font-size: 13px; font-weight: 700; color: var(--purple-deep); background: var(--purple-soft); border: 1px solid transparent; padding: 9px 15px; border-radius: 999px; }
.crumb { font-size: 13px; color: var(--ink-soft); font-weight: 600; padding: 22px 0 16px; }
.crumb b { color: var(--ink); }

.grid { display: grid; grid-template-columns: 1fr 400px; gap: 38px; align-items: start; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; gap: 26px; } }

/* gallery */
.gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 420px; position: relative; }
.gallery image-slot { width: 100%; height: 100%; }
.gallery .gimg { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; border: 1px solid var(--line); }
.gallery .gbig { grid-row: span 2; border-radius: 22px; }
.foto-count { position: absolute; bottom: 12px; right: 12px; background: var(--purple); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.site-footer { border-top: 1px solid var(--line); margin-top: 50px; padding: 40px 20px 34px; }
.site-footer .sf-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.site-footer .sf-brand { display: flex; align-items: center; gap: 9px; font-family: "Sora"; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.site-footer .sf-brand .mk { width: 24px; height: 24px; border-radius: 7px; background: var(--purple); display: grid; place-items: center; color: #fff; font-size: 12px; }
.site-footer .sf-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.6; max-width: 30ch; }
.site-footer h5 { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.site-footer .sf-links { display: flex; flex-direction: column; gap: 9px; }
.site-footer .sf-links a { font-size: 13.5px; color: var(--ink); text-decoration: none; }
.site-footer .sf-links a:hover { color: var(--purple-deep); }
.site-footer .sf-bottom { max-width: 1180px; margin: 26px auto 0; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-soft); flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) { .site-footer .sf-grid { grid-template-columns: 1fr 1fr; } }
.gallery .big { grid-row: span 2; }
@media (max-width: 600px) { .gallery { height: 300px; } }

.segbar { display: flex; gap: 8px; margin: 4px 0 14px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.segbar::-webkit-scrollbar { display: none; }
.segchip { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; font-family: "Sora"; padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft); white-space: nowrap; transition: border-color .12s, background .12s, color .12s; }
.segchip:hover { border-color: var(--purple); color: var(--purple-deep); }
.segchip.on { border-color: var(--purple); background: var(--purple); color: #fff; box-shadow: 0 6px 16px oklch(0.5 0.2 255 / .22); }
.segchip .ic { font-size: 15px; line-height: 1; }
.segchip .ct { font-size: 11px; font-weight: 800; opacity: .8; }
.segchip.on .ct { opacity: .9; }
.proyecto-cta { margin: 2px 0 18px; padding: 26px 28px; border-radius: 18px; background: linear-gradient(120deg, var(--purple-deep), var(--purple)); color: #fff; box-shadow: 0 16px 40px oklch(0.5 0.2 255 / .28); }
.proyecto-cta .pc-k { font-family: "Sora"; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.proyecto-cta .pc-t { font-family: "Sora"; font-size: 26px; font-weight: 800; line-height: 1.18; margin-top: 10px; max-width: 620px; text-wrap: balance; }
.proyecto-cta .pc-t b { color: oklch(0.92 0.09 90); }
.proyecto-cta .pc-s { font-size: 15px; font-weight: 600; line-height: 1.5; margin-top: 12px; opacity: .92; max-width: 560px; }
.proyecto-cta .pc-btn { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--purple-deep); font-family: "Sora"; font-weight: 800; font-size: 14.5px; padding: 13px 22px; border-radius: 12px; border: none; text-decoration: none; }
.proyecto-cta .pc-btn:hover { transform: translateY(-1px); }
@media (max-width: 600px) { .proyecto-cta .pc-t { font-size: 22px; } }
.tagrow { display: flex; gap: 8px; margin: 22px 0 12px; flex-wrap: wrap; }
.chip { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--purple-soft); color: var(--purple-deep); }
.chip.green { background: var(--green-soft); color: oklch(0.42 0.13 152); }
h1.title { font-size: 30px; font-weight: 700; line-height: 1.15; }
.loc { font-size: 15px; color: var(--ink-soft); font-weight: 600; margin-top: 8px; display: flex; align-items: center; gap: 7px; }

.specs { display: flex; gap: 26px; flex-wrap: wrap; padding: 22px 0; margin: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec { display: flex; flex-direction: column; gap: 3px; }
.spec .n { font-family: "Sora"; font-weight: 700; font-size: 21px; }
.spec .l { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
/* ficha técnica */
.ficha { margin: 26px 0; }
.ficha-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
@media (max-width: 600px) { .ficha-grid { grid-template-columns: repeat(2, 1fr); } }
.ficha-grid .fi { background: var(--card); padding: 14px 16px; }
.ficha-grid .fi .fl { font-size: 11.5px; color: var(--ink-soft); font-weight: 700; }
.ficha-grid .fi .fv { font-family: "Sora"; font-weight: 700; font-size: 16px; margin-top: 3px; }
.espacios { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.espacios .e { font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--purple-soft); border-radius: 999px; padding: 7px 13px; display: flex; align-items: center; gap: 6px; }
.espacios .e::before { content: "✓"; color: var(--green); font-weight: 800; }
.section-h { font-family: "Sora"; font-weight: 600; font-size: 18px; margin: 0 0 10px; }
.desc { color: var(--ink-soft); line-height: 1.65; font-size: 15px; max-width: 60ch; }
.agent { display: flex; align-items: center; gap: 13px; margin-top: 26px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.agent .av { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, var(--purple), var(--purple-deep)); color: #fff; display: grid; place-items: center; font-weight: 800; font-family: "Sora"; }
.agent .nm { font-weight: 700; font-size: 14.5px; }
.agent .sb { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.agent .verif { margin-left: auto; font-size: 11.5px; font-weight: 700; color: oklch(0.42 0.13 152); background: var(--green-soft); padding: 5px 10px; border-radius: 999px; }
.ficha-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ficha-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; font-family: "Sora"; color: var(--purple-deep); background: var(--purple-soft); border: 1px solid transparent; padding: 10px 15px; border-radius: 11px; text-decoration: none; transition: border-color .12s; }
.ficha-link:hover { border-color: var(--purple); }
.msg-cta { border: none; cursor: pointer; background: var(--purple); color: #fff; }
.msg-cta:hover { background: var(--purple-deep); border-color: transparent; }
.msg-overlay { position: fixed; inset: 0; background: rgba(43,36,64,.5); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 60; padding: 18px; }
.msg-sheet { width: 100%; max-width: 460px; max-height: 88vh; background: #fff; border-radius: 20px; box-shadow: 0 24px 70px rgba(43,36,64,.34); display: flex; flex-direction: column; overflow: hidden; }
.msg-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(120deg, var(--purple-deep), var(--purple)); color: #fff; }
.msg-head .mh-t { font-family: "Sora"; font-weight: 800; font-size: 16px; }
.msg-head .mh-s { font-size: 12px; opacity: .9; font-weight: 600; margin-top: 2px; }
.msg-head .mh-x { margin-left: auto; background: rgba(255,255,255,.18); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; cursor: pointer; }
.msg-prop { padding: 11px 18px; background: var(--purple-soft); color: var(--purple-deep); font-weight: 700; font-size: 13px; }
.msg-id { padding: 20px 18px; display: flex; flex-direction: column; gap: 11px; }
.msg-id p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.msg-inp, .msg-ta { font-family: inherit; font-size: 14px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; color: var(--ink); }
.msg-inp:focus, .msg-ta:focus { outline: none; border-color: var(--purple); }
.msg-start, .msg-send { font-family: "Sora"; font-weight: 800; background: var(--purple); color: #fff; border: none; border-radius: 12px; padding: 13px; font-size: 14px; cursor: pointer; }
.msg-start:hover, .msg-send:hover { background: var(--purple-deep); }
.msg-thread { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 220px; background: var(--bg); }
.msg-empty { font-size: 13px; color: var(--ink-soft); line-height: 1.5; text-align: center; margin: auto; padding: 0 10px; }
.bub { max-width: 80%; padding: 9px 13px; border-radius: 14px; display: flex; flex-direction: column; gap: 3px; }
.bub .bt { font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.bub .bts { font-size: 10.5px; opacity: .65; font-weight: 600; }
.bub.me { align-self: flex-end; background: var(--purple); color: #fff; border-bottom-right-radius: 5px; }
.bub.them { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 5px; }
.msg-compose { display: flex; gap: 9px; padding: 12px 18px; border-top: 1px solid var(--line); align-items: flex-end; }
.msg-compose .msg-ta { resize: none; min-height: 44px; max-height: 110px; }
.msg-compose .msg-send { flex-shrink: 0; padding: 12px 18px; }
.msg-foot { font-size: 11px; color: var(--ink-soft); padding: 0 18px 14px; line-height: 1.4; }

/* calculator card */
.calc { position: sticky; top: 92px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
@media (max-width: 900px) { .calc { position: static; } }
.calc-head { padding: 20px 22px 16px; }
.price-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.price { font-family: "Sora"; font-weight: 700; font-size: 26px; margin-top: 2px; }
.modes { display: flex; gap: 6px; padding: 0 22px; }
.mode { flex: 1; font-size: 12.5px; font-weight: 700; padding: 10px 4px; border-radius: 11px 11px 0 0; border: none; background: transparent; color: var(--ink-soft); position: relative; transition: color .15s; }
.mode.active { color: var(--purple-deep); background: var(--purple-soft); }
.mode:disabled { opacity: 0.35; cursor: not-allowed; }
.calc-body { padding: 18px 22px 22px; }
.month-box { background: linear-gradient(160deg, var(--purple-soft), oklch(0.97 0.02 255)); border-radius: 14px; padding: 17px 18px; text-align: center; }
.month-box .lab { font-size: 12.5px; font-weight: 700; color: var(--purple-deep); }
.month-box .amt { font-family: "Sora"; font-weight: 800; font-size: 38px; color: var(--purple-deep); line-height: 1; margin: 6px 0 2px; letter-spacing: -0.03em; }
.month-box .sub { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }

.bar { display: flex; height: 9px; border-radius: 999px; overflow: hidden; margin: 16px 0 8px; background: var(--line); }
.bar span { display: block; height: 100%; }
.legend { display: flex; flex-direction: column; gap: 7px; margin-bottom: 6px; }
.legend .row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legend .dot { width: 10px; height: 10px; border-radius: 3px; }
.legend .row b { margin-left: auto; font-weight: 700; }

.field { margin-top: 16px; }
.field .lr { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.field .lr label { font-size: 13px; font-weight: 700; }
.field .lr .v { font-size: 13px; font-weight: 700; color: var(--purple-deep); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--line); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--purple); box-shadow: 0 2px 8px oklch(0.5 0.2 255 / 0.4); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--purple); cursor: pointer; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; font-size: 13px; font-weight: 700; padding: 9px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft); }
.seg button.on { border-color: var(--purple); background: var(--purple-soft); color: var(--purple-deep); }

.alert { margin-top: 14px; font-size: 12.5px; font-weight: 600; line-height: 1.45; background: oklch(0.97 0.04 75); color: oklch(0.45 0.11 70); border-radius: 11px; padding: 11px 13px; }
.hook { margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); display: flex; gap: 9px; align-items: flex-start; background: var(--green-soft); border-radius: 11px; padding: 11px 13px; }
.hook b { color: oklch(0.4 0.13 152); }

.cta { width: 100%; margin-top: 18px; padding: 15px; border-radius: 13px; border: 1.5px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); font-weight: 800; font-size: 15px; font-family: "Sora"; box-shadow: 0 8px 22px oklch(0.5 0.2 255 / 0.28); transition: transform .12s ease, box-shadow .12s; }
.cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px oklch(0.5 0.2 255 / 0.34); }
.cta:active { transform: translateY(0); }
.disclaimer { font-size: 10.5px; color: var(--ink-soft); text-align: center; margin-top: 11px; line-height: 1.4; }
.notarial { margin-top: 16px; border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; }
.notarial .nr { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ink-soft); font-weight: 600; padding: 3px 0; }
.notarial .nr b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.notarial .nr em { font-style: normal; font-weight: 600; opacity: .7; font-size: 11.5px; }
.notarial .nr.tot { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 8px; font-size: 14px; color: var(--ink); font-weight: 800; }
.notarial .nr.tot b { color: var(--purple-deep); }
.notarial p { font-size: 11px; color: var(--ink-soft); line-height: 1.4; margin-top: 8px; }
.cap-btn { width: 100%; margin-top: 10px; padding: 13px; border-radius: 13px; border: 1.5px solid var(--line); background: #fff; color: var(--purple-deep); font-weight: 800; font-size: 14px; font-family: "Sora"; display: flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .12s, background .12s; }
.cap-btn:hover { border-color: var(--purple); background: var(--purple-soft); }
.cap-note { font-size: 10.5px; color: var(--ink-soft); text-align: center; margin-top: 6px; line-height: 1.4; }
/* Créditos de construcción (proyectos) */
.cmodel-desc { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.5; background: var(--purple-soft); border-radius: 11px; padding: 10px 13px; margin: 14px 0 4px; }
.cmodel-desc b { color: var(--purple-deep); font-weight: 800; }
.rules { margin-top: 16px; border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px; background: oklch(0.99 0.004 290); }
.rules h4 { font-family: "Sora"; font-size: 12.5px; font-weight: 800; color: var(--purple-deep); display: flex; align-items: center; gap: 6px; }
.rules ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.rules li { font-size: 12px; color: var(--ink); font-weight: 500; line-height: 1.45; padding-left: 18px; position: relative; }
.rules li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 800; }
.rules .rsub { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin: 12px 0 2px; }
.banks-pill { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.banks-pill span { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--purple-soft); color: var(--purple-deep); }
.bankoffers { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.boffer { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.bo-h { display: flex; justify-content: space-between; align-items: baseline; }
.bo-n { font-family: "Sora"; font-weight: 800; font-size: 14.5px; color: var(--purple-deep); }
.bo-pay { font-family: "Sora"; font-weight: 800; font-size: 16px; }
.bo-pay em { font-style: normal; font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.bo-meta { font-size: 12px; color: var(--ink-soft); font-weight: 600; margin-top: 5px; }
.bo-eng { font-size: 12px; color: var(--ink); font-weight: 700; margin-top: 3px; }

/* capacidad de pago */
.cap-sheet { max-width: 480px; }
.cap-months { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-bottom: 16px; }
.cap-m { display: flex; flex-direction: column; gap: 5px; }
.cap-m span { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.cap-inp { margin-bottom: 0 !important; padding: 11px 12px !important; font-size: 14px !important; }
.fld-c { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.fld-c > span { font-size: 13px; font-weight: 700; }
.fld-c span em { font-weight: 600; color: var(--ink-soft); font-style: normal; }
.fld-c .hint { font-size: 11.5px; color: var(--purple-deep); font-weight: 700; font-style: normal; margin-top: -4px; }
.fld-c select.inp { margin-bottom: 0; }
.cap-nav { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.btn-back { background: none; border: none; color: var(--ink-soft); font-weight: 700; font-size: 14px; font-family: "Sora"; padding: 8px 4px; }
.cap-cta { margin-top: 0 !important; flex: 1; }
.warn-ic { width: 64px; height: 64px; border-radius: 50%; background: oklch(0.96 0.05 75); color: oklch(0.6 0.16 60); display: grid; place-items: center; font-size: 34px; font-weight: 800; margin: 4px auto 16px; }
.coacred { background: var(--purple-soft); border-radius: 14px; padding: 14px 16px; font-size: 13px; line-height: 1.55; margin: 4px 0 6px; }
.coacred b { font-weight: 800; }
.coacred > b:first-child { display: block; color: var(--purple-deep); margin-bottom: 5px; }
.res-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 4px; }
.res-card { border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 15px; }
.res-card.ok { border-color: var(--green); background: var(--green-soft); }
.res-card.no { border-color: oklch(0.85 0.07 60); background: oklch(0.98 0.025 75); }
.res-card.off { opacity: 0.62; }
.res-top { display: flex; align-items: center; justify-content: space-between; }
.res-bank { font-family: "Sora"; font-weight: 700; font-size: 15px; }
.res-bank .asum { font-style: normal; color: var(--ink-soft); margin-left: 3px; cursor: help; }
.res-badge { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.res-badge.g { background: var(--green); color: #fff; }
.res-badge.a { background: oklch(0.6 0.16 60); color: #fff; }
.res-badge.off { background: var(--line); color: var(--ink-soft); }
.res-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 11px; }
.res-rows > div { display: flex; justify-content: space-between; font-size: 12.5px; }
.res-rows > div span { color: var(--ink-soft); font-weight: 600; }
.res-rows > div b { font-weight: 700; }
.res-rows .res-margin { grid-column: 1 / -1; border-top: 1px solid oklch(0.88 0.01 290 / 0.6); padding-top: 7px; margin-top: 2px; font-size: 13.5px; }
.res-motivo { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; margin-top: 7px; }
.cap-deudas { display: flex; flex-direction: column; gap: 4px; }
.deuda-total { margin-top: 6px; padding: 11px 14px; background: var(--purple-soft); border-radius: 11px; font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; }
.deuda-total b { font-weight: 800; color: var(--purple-deep); }

/* Perfil Hipotecario Inteligente */
.cap-head2 { justify-content: space-between; padding: 16px 20px 0; }
.cap-brand { font-family: "Sora"; font-weight: 700; font-size: 14px; color: var(--purple-deep); }
.cap-progress { padding: 12px 22px 4px; }
.cap-bar { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; }
.cap-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--purple-deep)); border-radius: 999px; transition: width .4s cubic-bezier(.3,.8,.3,1); }
.cap-pmsg { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-top: 7px; }
.cap-pmsg b { color: var(--purple-deep); font-weight: 800; }
.opt-simple { justify-content: space-between; }
.opt-simple .ot { font-size: 14.5px; }
.opt-arrow { color: var(--purple); font-weight: 800; opacity: 0; transition: opacity .12s, transform .12s; }
.opt-simple:hover .opt-arrow { opacity: 1; transform: translateX(2px); }
.ideal-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.chip-btn { flex: 1; min-width: 70px; padding: 10px; border-radius: 11px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 13px; color: var(--ink-soft); font-family: "Sora"; }
.chip-btn.on, .chip-btn:hover { border-color: var(--purple); background: var(--purple-soft); color: var(--purple-deep); }
.ideal-box { display: flex; gap: 10px; margin: 16px 0 6px; }
.ideal-box > div { flex: 1; background: var(--purple-soft); border-radius: 13px; padding: 13px 15px; }
.ideal-box span { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.ideal-box b { font-family: "Sora"; font-weight: 800; font-size: 21px; color: var(--purple-deep); }
.ver-desglose { width: 100%; margin-top: 16px; background: none; border: none; color: var(--purple-deep); font-weight: 700; font-size: 13px; font-family: "Sora"; padding: 6px; }
.ideal-rec { margin-top: 12px; font-size: 13px; font-weight: 600; line-height: 1.5; background: oklch(0.97 0.03 75); color: oklch(0.45 0.1 60); border-radius: 12px; padding: 12px 14px; }
.ideal-rec.ok { background: var(--green-soft); color: oklch(0.4 0.13 152); }
.ideal-rec b { font-weight: 800; }
.score-card { margin-top: 22px; padding: 18px; border-radius: 16px; background: oklch(0.18 0.03 290); color: #fff; }
.score-tag { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: oklch(0.75 0.06 255); margin-bottom: 14px; }
.clase-badge { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: 13px; background: oklch(0.24 0.03 290); border-left: 4px solid; margin-bottom: 16px; }
.clase-emoji { font-size: 26px; line-height: 1; }
.clase-nombre { font-family: "Sora"; font-weight: 800; font-size: 15px; }
.clase-accion { font-size: 12.5px; color: oklch(0.82 0.01 290); font-weight: 500; line-height: 1.45; margin-top: 3px; }
.cf-ii-row { display: flex; gap: 12px; margin-bottom: 18px; }
.score-big { flex: 1; background: oklch(0.24 0.03 290); border-radius: 12px; padding: 13px 15px; }
.score-big span { display: block; font-size: 11.5px; font-weight: 600; color: oklch(0.78 0.01 290); }
.score-big b { font-family: "Sora"; font-weight: 800; font-size: 30px; }
.score-big i { font-size: 14px; font-weight: 600; color: oklch(0.7 0.01 290); font-style: normal; }
.score-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 460px) { .score-cols { grid-template-columns: 1fr; gap: 14px; } .cf-ii-row { flex-direction: column; } }
.score-h { font-size: 11.5px; font-weight: 800; color: oklch(0.78 0.06 255); margin-bottom: 10px; }
.meter { margin-bottom: 11px; }
.meter-h { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 4px; color: oklch(0.86 0.01 290); }
.meter-h b { font-weight: 700; }
.meter-h i { font-style: normal; color: oklch(0.62 0.01 290); }
.meter-bar { height: 6px; border-radius: 999px; background: oklch(0.3 0.02 290); overflow: hidden; }
.meter-bar span { display: block; height: 100%; border-radius: 999px; transition: width .5s; }
.lead-mini { margin-top: 16px; padding-top: 13px; border-top: 1px solid oklch(0.3 0.02 290); font-size: 11.5px; color: oklch(0.78 0.01 290); line-height: 1.5; }
.lead-mini b { color: #fff; font-weight: 700; }

/* modal / funnel */
.overlay { position: fixed; inset: 0; z-index: 80; background: oklch(0.2 0.04 290 / 0.55); backdrop-filter: blur(5px); display: flex; align-items: flex-start; justify-content: center; padding: 18px; overflow-y: auto; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 440px; margin: auto; background: var(--card); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .25s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.sheet-head { padding: 18px 20px 0; display: flex; align-items: center; gap: 12px; }
.progress { flex: 1; display: flex; gap: 5px; }
.progress i { flex: 1; height: 5px; border-radius: 999px; background: var(--line); transition: background .3s; }
.progress i.on { background: var(--purple); }
.x { border: none; background: var(--purple-soft); color: var(--purple-deep); width: 30px; height: 30px; border-radius: 50%; font-size: 16px; font-weight: 700; display: grid; place-items: center; }
.sheet-body { padding: 20px 22px 24px; }
.q { font-family: "Sora"; font-weight: 700; font-size: 21px; line-height: 1.22; margin-bottom: 5px; }
.q-sub { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; margin-bottom: 18px; }
.opt { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 15px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; margin-bottom: 10px; transition: border-color .12s, background .12s, transform .1s; }
.opt:hover { border-color: var(--purple); background: var(--purple-soft); transform: translateX(2px); }
.opt .ic { font-size: 22px; width: 30px; text-align: center; }
.opt .ot { font-weight: 700; font-size: 14.5px; }
.opt .od { font-size: 12px; color: var(--ink-soft); font-weight: 600; margin-top: 1px; }
.inp { width: 100%; padding: 14px 15px; border-radius: 13px; border: 1.5px solid var(--line); font-size: 15px; font-family: inherit; font-weight: 600; margin-bottom: 12px; outline: none; transition: border-color .12s; }
.inp:focus { border-color: var(--purple); }
.inp.err { border-color: oklch(0.6 0.2 25); }
.lead-summary { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; font-size: 13px; }
.lead-summary .li { display: flex; justify-content: space-between; padding: 4px 0; }
.lead-summary .li span { color: var(--ink-soft); font-weight: 600; }
.lead-summary .li b { font-weight: 700; }
.success-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-size: 32px; margin: 4px auto 16px; }
.wa { background: oklch(0.97 0.03 150); border: 1px solid var(--green-soft); border-radius: 14px; padding: 14px 16px; font-size: 12.5px; line-height: 1.55; margin-top: 16px; text-align: left; font-family: "Manrope"; }
.wa .h { font-weight: 800; color: oklch(0.4 0.13 152); margin-bottom: 6px; }
.wa b { font-weight: 700; }
.note { font-size: 11px; color: var(--ink-soft); text-align: center; margin-top: 14px; }
`;

/* ---------------- Calculator ---------------- */
function Calculator({ prop, onPrequalify, onCapacity }) {
  const esResidencial = prop.precio > 3500000;
  // Infonavit y Cofinavit solo aplican a vivienda. Los inmuebles comerciales/industriales solo con crédito bancario.
  const esVivienda = ["Casa", "Departamento", "Desarrollo"].includes(prop.tipo);
  const esProyecto = prop.tipo === "Proyecto de construcción";
  const esTerreno = prop.tipo === "Terreno";
  const [mode, setMode] = useState("banco");
  const [enganchePct, setEnganchePct] = useState(0.15);
  const [anios, setAnios] = useState(20);
  const [ssv, setSsv] = useState(120000);

  // Créditos de construcción (proyectos)
  const [cmodel, setCmodel] = useState("integral");
  const [valTerreno, setValTerreno] = useState(0);
  const [valProyecto, setValProyecto] = useState(0);
  useEffect(() => {
    const base = prop.precio || 0;
    setValProyecto(base);
    setValTerreno(esTerreno ? base : (prop.valorTerreno || Math.round(base * 0.35)));
  }, [prop.id]);

  // residencial premium: solo crédito bancario (fuera Cofinavit e Infonavit)
  useEffect(() => { if (esResidencial && mode !== "banco") setMode("banco"); }, [esResidencial, mode]);
  // inmuebles no habitacionales: fuerza modo banco
  useEffect(() => { if (!esVivienda && mode !== "banco") setMode("banco"); }, [esVivienda, mode]);

  const res = useMemo(() => {
    if (mode === "banco") return calcBanco(prop.precio, enganchePct, anios);
    if (mode === "cofinavit") return calcCofinavit(prop.precio, ssv, anios);
    return calcInfonavit(prop.precio, ssv, anios);
  }, [mode, enganchePct, anios, ssv, prop.precio]);

  const total = res.desglose.reduce((a, d) => a + d.monto, 0);

  // ---- Crédito para terreno (solo terreno) ----
  if (esTerreno) {
    const offers = calcTerreno(valTerreno);
    const desde = offers.length ? Math.min(...offers.map((o) => o.pago)) : 0;
    const T = TERRENO_RULES;
    return (
      <aside className="calc">
        <div className="calc-head">
          <div className="price-label">Crédito para terreno</div>
          <div className="price">{fmtMXN(prop.precio)}</div>
        </div>
        <div className="calc-body">
          <div className="month-box">
            <div className="lab">Mensualidad desde</div>
            <div className="amt">{fmtMXN(desde)}</div>
            <div className="sub">Solo 3 bancos prestan para terreno</div>
          </div>

          <div className="field">
            <div className="lr"><label>Valor del terreno</label><span className="v">{fmtMXN(valTerreno)}</span></div>
            <input type="range" min="0" max={Math.max(2000000, Math.round((prop.precio || 1000000) * 2))} step="50000" value={valTerreno} onChange={(e) => setValTerreno(+e.target.value)} />
          </div>

          <div className="bankoffers">
            {offers.map((o) => (
              <div className="boffer" key={o.banco}>
                <div className="bo-h"><span className="bo-n">{o.banco}</span><span className="bo-pay">{fmtMXN(o.pago)}<em>/mes</em></span></div>
                <div className="bo-meta">Hasta {o.anios} años · financia {Math.round(o.ltv * 100)}% · crédito {fmtMXN(o.credito)}</div>
                <div className="bo-eng">Enganche {fmtMXN(o.enganche)} ({Math.round((1 - o.ltv) * 100)}%)</div>
              </div>
            ))}
          </div>

          <div className="notarial">
            <div className="nr"><span>+ Gastos notariales <em>(aprox. 3% del terreno)</em></span><b>{fmtMXN(valTerreno * GASTOS_NOTARIALES_TERRENO_PCT)}</b></div>
            <p>Los gastos notariales son <b>aproximados</b>, al 3% del valor del terreno, y corren por cuenta del comprador.</p>
          </div>

          <div className="rules">
            <h4>📋 Reglas · crédito de terreno</h4>
            <ul>
              {T.detalle.map((r, i) => <li key={i}>{r}</li>)}
              {T.comun.map((r, i) => <li key={"c" + i}>{r}</li>)}
            </ul>
            <div className="rsub">Bancos que lo otorgan</div>
            <div className="banks-pill">{T.bancos.map((b) => <span key={b}>{b}</span>)}</div>
          </div>

          <button className="cta" onClick={() => onPrequalify({ mode: "terreno", res: { mensualidad: desde } })} style={{ marginTop: 14 }}>Ver si califico para este crédito →</button>
          <div className="disclaimer">Cálculo estimado. Los ingresos y topes de endeudamiento se calculan igual que en los demás créditos. No constituye una oferta de crédito.</div>
        </div>
      </aside>
    );
  }

  // ---- Créditos de construcción para proyectos ----
  if (esProyecto) {
    const R = CONSTRUCCION_RULES;
    const m = R.modelos[cmodel];
    const cres = calcConstruccion(valTerreno, valProyecto, cmodel, anios);
    const maxT = Math.max(3000000, Math.round((prop.precio || 1000000) * 1.2));
    const maxP = Math.max(6000000, Math.round((prop.precio || 2000000) * 2));
    return (
      <aside className="calc">
        <div className="calc-head">
          <div className="price-label">Crédito de construcción</div>
          <div className="price">{fmtMXN(cres.credito)}</div>
        </div>
        <div className="modes">
          <button className={"mode" + (cmodel === "integral" ? " active" : "")} onClick={() => setCmodel("integral")}>Integral</button>
          <button className={"mode" + (cmodel === "propio" ? " active" : "")} onClick={() => setCmodel("propio")}>Terreno propio</button>
        </div>
        <div className="calc-body">
          <div className="month-box">
            <div className="lab">Mensualidad estimada</div>
            <div className="amt">{fmtMXN(cres.mensualidad)}</div>
            <div className="sub">a {anios} años · promedio de Banorte, Santander y Banregio</div>
          </div>

          <div className="cmodel-desc"><b>{m.nombre}.</b> {m.para} Financia hasta el <b>80%</b> del valor del (terreno + proyecto terminado).</div>

          <div className="field">
            <div className="lr"><label>{cmodel === "propio" ? "Valor de tu terreno" : "Valor del terreno a comprar"}</label><span className="v">{fmtMXN(valTerreno)}</span></div>
            <input type="range" min="0" max={maxT} step="50000" value={valTerreno} onChange={(e) => setValTerreno(+e.target.value)} />
          </div>
          <div className="field">
            <div className="lr"><label>Valor del proyecto terminado</label><span className="v">{fmtMXN(valProyecto)}</span></div>
            <input type="range" min="0" max={maxP} step="50000" value={valProyecto} onChange={(e) => setValProyecto(+e.target.value)} />
          </div>

          <div className="field">
            <div className="lr"><label>Plazo</label></div>
            <div className="seg">
              {[15, 20].map((a) => (
                <button key={a} className={anios === a ? "on" : ""} onClick={() => setAnios(a)}>{a} años</button>
              ))}
            </div>
          </div>

          <div className="notarial">
            <div className="nr"><span>Valor total (terreno + proyecto)</span><b>{fmtMXN(cres.valorTotal)}</b></div>
            <div className="nr"><span>Financiamiento (hasta 80%)</span><b>{fmtMXN(cres.credito)}</b></div>
            <div className="nr"><span>+ Gastos notariales <em>(aprox. 3% del terreno)</em></span><b>{fmtMXN(cres.notariales)}</b></div>
            <div className="nr tot"><span>{cres.aportacionLabel}</span><b>{fmtMXN(cres.enganche)}</b></div>
            <p>Los gastos notariales son <b>aproximados</b>, al 3% del valor del terreno. Los ingresos y los topes de endeudamiento se calculan igual que en un crédito hipotecario normal.</p>
          </div>

          <div className="rules">
            <h4>📋 Reglas de operación · {m.corto}</h4>
            <ul>
              {m.reglas.map((r, i) => <li key={i}>{r}</li>)}
              {R.comun.map((r, i) => <li key={"c" + i}>{r}</li>)}
            </ul>
            <div className="rsub">Bancos que lo otorgan</div>
            <div className="banks-pill">{m.bancos.map((b) => <span key={b}>{b}</span>)}</div>
          </div>

          <button className="cta" onClick={() => onPrequalify({ mode: "construccion-" + cmodel, res: cres })} style={{ marginTop: 14 }}>Ver si califico para este crédito →</button>
          <div className="disclaimer">Cálculo estimado. Sujeto a proyecto ejecutivo, presupuesto validado y avalúo. No constituye una oferta de crédito.</div>
        </div>
      </aside>
    );
  }

  return (
    <aside className="calc">
      <div className="calc-head">
        <div className="price-label">Precio de la propiedad</div>
        <div className="price">{fmtMXN(prop.precio)}</div>
      </div>
      <div className="modes">
        <button className={"mode" + (mode === "banco" ? " active" : "")} onClick={() => setMode("banco")}>Banco</button>
        {esVivienda && !esResidencial && <button className={"mode" + (mode === "cofinavit" ? " active" : "")} onClick={() => setMode("cofinavit")}>Cofinavit</button>}
        {esVivienda && !esResidencial && <button className={"mode" + (mode === "infonavit" ? " active" : "")} onClick={() => setMode("infonavit")}>Infonavit</button>}
      </div>
      <div className="calc-body">
        <div className="month-box">
          <div className="lab">{mode === "banco" ? "Mensualidad promedio estimada" : "Tu mensualidad total estimada"}</div>
          <div className="amt">{fmtMXN(res.mensualidad)}</div>
          <div className="sub">a {anios} años · {mode === "banco" ? "promedio de " + res.bancosAprobados + " bancos" : mode === "cofinavit" ? "Banco + Infonavit" : "100% Infonavit"}</div>
        </div>

        {res.desglose.length > 1 && (
          <>
            <div className="bar">
              {res.desglose.map((d, i) => (
                <span key={i} style={{ width: (d.monto / total) * 100 + "%", background: d.color }}></span>
              ))}
            </div>
            <div className="legend">
              {res.desglose.map((d, i) => (
                <div className="row" key={i}>
                  <i className="dot" style={{ background: d.color }}></i>
                  {d.etiqueta} <b>{fmtMXN(d.monto)}</b>
                </div>
              ))}
            </div>
          </>
        )}

        {mode === "banco" && (
          <>
            <div className="field">
              <div className="lr"><label>Enganche</label><span className="v">{Math.round(enganchePct * 100)}% · {fmtMXN(res.enganche)}</span></div>
              <input type="range" min="5" max="40" value={enganchePct * 100} onChange={(e) => setEnganchePct(e.target.value / 100)} />
            </div>
            {enganchePct < 0.1 && (
              <div className="alert">Para propiedades de este valor los bancos piden un enganche mínimo del 10% ({fmtMXN(prop.precio * 0.1)}). ¿Te gustaría revisar la opción de Cofinavit para usar tu Subcuenta de Vivienda como enganche?</div>
            )}
          </>
        )}

        {(mode === "cofinavit" || mode === "infonavit") && (
          <div className="field">
            <div className="lr"><label>Saldo en tu Subcuenta de Vivienda</label><span className="v">{fmtMXN(ssv)}</span></div>
            <input type="range" min="0" max="600000" step="10000" value={ssv} onChange={(e) => setSsv(+e.target.value)} />
          </div>
        )}

        <div className="field">
          <div className="lr"><label>Plazo</label></div>
          <div className="seg">
            {[15, 20].map((a) => (
              <button key={a} className={anios === a ? "on" : ""} onClick={() => setAnios(a)}>{a} años</button>
            ))}
          </div>
        </div>

        {mode === "cofinavit" && (
          <div className="hook">
            <span>🎉</span>
            <div>Usando tu Subcuenta de Vivienda, tu enganche en efectivo baja a <b>{fmtMXN(res.enganche)}</b>. Da clic abajo para validar tu precalificación real.</div>
          </div>
        )}
        {mode === "infonavit" && !res.cubre && (
          <div className="alert">El crédito Infonavit + tu subcuenta cubren {fmtMXN(res.credito + res.enganche)}. Faltan {fmtMXN(res.faltante)} — considera el esquema Cofinavit para completar el valor de la casa.</div>
        )}
        {mode === "banco" && (
          <div className="hook">
            <span>🔓</span>
            <div>Hay <b>{res.bancosMejores} {res.bancosMejores === 1 ? "banco" : "bancos"}</b> ofreciendo una mensualidad menor a este promedio. Precalifícate para desbloquear la comparativa banco por banco.</div>
          </div>
        )}

        <div className="notarial">
          <div className="nr"><span>Enganche</span><b>{fmtMXN(res.enganche)}</b></div>
          <div className="nr"><span>+ Gastos notariales <em>(aprox. 6%)</em></span><b>{fmtMXN(res.notariales)}</b></div>
          <div className="nr tot"><span>Desembolso inicial estimado</span><b>{fmtMXN(res.enganche + res.notariales)}</b></div>
          <p>Los gastos notariales son <b>aproximados</b> (~6% del valor de la vivienda) y corren por cuenta del comprador, aparte del enganche.</p>
        </div>

        <button className="cta" onClick={() => onPrequalify({ mode, res })}>Ver si califico para esta casa →</button>
        <button className="cap-btn" onClick={() => onCapacity({ enganchePct, anios })}>✨ Crear mi Perfil Hipotecario Inteligente (válido en todo el portal)</button>
        <div className="cap-note">Se guarda en tu perfil y ajusta tu compatibilidad con cualquier propiedad, no solo esta.</div>
        <div className="disclaimer">Cálculo estimado en tiempo real promediando las principales instituciones de México. No constituye una oferta de crédito.</div>
      </div>
    </aside>
  );
}

/* ---------------- Funnel ---------------- */
const FUNNEL = [
  {
    key: "ingresos", q: "¿Cómo compruebas tus ingresos mensuales?",
    opts: [
      { ic: "👔", t: "Nómina", d: "Recibo recibos de mi empresa" },
      { ic: "💼", t: "Independiente / Negocio propio", d: "Facturas o estados de cuenta" },
      { ic: "🛠️", t: "Informal / Mixto", d: "Efectivo o depósitos directos" },
    ],
  },
  {
    key: "buro", q: "¿Cómo está tu comportamiento en Buró de Crédito?",
    opts: [
      { ic: "⭐", t: "Excelente", d: "Nunca me atraso en mis pagos" },
      { ic: "👍", t: "Regular", d: "Algún atraso pequeño, al corriente" },
      { ic: "⚠️", t: "Tengo problemas", d: "Sé que tengo marcas negativas" },
    ],
  },
];

function Funnel({ prop, ctx, onClose }) {
  const totalSteps = FUNNEL.length + 1; // + captura
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState({});
  const [done, setDone] = useState(false);
  const [form, setForm] = useState(() => { const c = window.CCVRank ? window.CCVRank.getContacto() : null; return { nombre: (c && c.nombre) || "", whatsapp: (c && c.celular) || "", correo: (c && c.correo) || "" }; });
  const [touched, setTouched] = useState(false);

  function pick(key, t) {
    setAnswers((a) => ({ ...a, [key]: t }));
    setStep((s) => s + 1);
  }

  const waOK = /^\d{10}$/.test(form.whatsapp.replace(/\D/g, ""));
  const valid = form.nombre.trim().length > 2 && waOK && /\S+@\S+\.\S+/.test(form.correo);

  const perfil = "Crédito bancario";

  return (
    <div className="overlay" onClick={onClose}>
      <div className="sheet" onClick={(e) => e.stopPropagation()}>
        <div className="sheet-head">
          <div className="progress">
            {Array.from({ length: totalSteps }).map((_, i) => (
              <i key={i} className={i <= step ? "on" : ""}></i>
            ))}
          </div>
          <button className="x" onClick={onClose}>×</button>
        </div>
        <div className="sheet-body">
          {!done && step < FUNNEL.length && (
            <>
              <div className="q">{FUNNEL[step].q}</div>
              <div className="q-sub">Paso {step + 1} de {totalSteps} · 30 segundos</div>
              {FUNNEL[step].opts.map((o) => (
                <button className="opt" key={o.t} onClick={() => pick(FUNNEL[step].key, o.t)}>
                  <span className="ic">{o.ic}</span>
                  <span><span className="ot">{o.t}</span><span className="od">{o.d}</span></span>
                </button>
              ))}
            </>
          )}

          {!done && step === FUNNEL.length && (
            <>
              <div className="q">¡Analizando tu perfil con las opciones de los bancos!</div>
              <div className="q-sub">¿A dónde te enviamos tu reporte de pre-calificación?</div>
              <input className={"inp" + (touched && form.nombre.trim().length <= 2 ? " err" : "")} placeholder="Nombre completo" value={form.nombre} onChange={(e) => setForm({ ...form, nombre: e.target.value })} />
              <input className={"inp" + (touched && !waOK ? " err" : "")} placeholder="WhatsApp (10 dígitos)" inputMode="tel" value={form.whatsapp} onChange={(e) => setForm({ ...form, whatsapp: e.target.value })} />
              <input className={"inp" + (touched && !/\S+@\S+\.\S+/.test(form.correo) ? " err" : "")} placeholder="Correo electrónico" inputMode="email" value={form.correo} onChange={(e) => setForm({ ...form, correo: e.target.value })} />
              <button className="cta" onClick={() => { setTouched(true); if (valid) { setDone(true); if (window.CCVRank) window.CCVRank.saveContacto({ nombre: form.nombre, celular: form.whatsapp, correo: form.correo }); } }}>Obtener mi Pre-calificación</button>
              <div className="note">🔒 Tus datos solo se usan para tu asesoría de crédito.</div>
            </>
          )}

          {done && (
            <div style={{ textAlign: "center" }}>
              <div className="success-ic">✓</div>
              <div className="q">¡Listo, {form.nombre.split(" ")[0]}!</div>
              <div className="q-sub">Un broker hipotecario te contactará por WhatsApp con tu comparativa banco por banco para esta casa.</div>
              <div className="lead-summary" style={{ textAlign: "left" }}>
                <div className="li"><span>Propiedad</span><b>{prop.titulo}</b></div>
                <div className="li"><span>Mensualidad estimada</span><b>{fmtMXN(ctx.res.mensualidad)}</b></div>
                <div className="li"><span>Esquema</span><b style={{ textTransform: "capitalize" }}>{ctx.mode}</b></div>
                <div className="li"><span>Tu perfil</span><b>{perfil}</b></div>
              </div>
              <div className="wa">
                <div className="h">🚨 Lead enviado al broker</div>
                Cliente: <b>{form.nombre}</b><br />
                Propiedad: <b>{prop.titulo}</b> ({fmtMXN(prop.precio)})<br />
                Inmobiliaria: <b>Inmobiliaria del Puerto · Juan Pérez</b><br />
                Perfil: <b>{answers.ingresos} / Buró {answers.buro} / {perfil}</b>
              </div>
              <button className="cta" style={{ marginTop: 16 }} onClick={onClose}>Cerrar</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------------- Property page ---------------- */
function Spec({ n, l }) { return <div className="spec"><span className="n">{n}</span><span className="l">{l}</span></div>; }

/* ---------------- Mensajes al vendedor (con registro de conversación) ---------------- */
const MSG_KEY = "ccv_mensajes";
function loadConvos() { try { return JSON.parse(localStorage.getItem(MSG_KEY) || "[]"); } catch (e) { return []; } }
function saveConvos(a) { try { localStorage.setItem(MSG_KEY, JSON.stringify(a)); } catch (e) {} }
function convoId(propId, celular, nombre) { return propId + "::" + (celular || nombre || "anon").replace(/\s+/g, "").toLowerCase(); }

function MessageThread({ prop, onClose }) {
  const myKey = "ccv_cliente_msg";
  const saved = (() => { try { return JSON.parse(localStorage.getItem(myKey) || "null"); } catch (e) { return null; } })();
  const shared = window.CCVRank ? window.CCVRank.getContacto() : null;
  const [me, setMe] = useState(saved || (shared ? { nombre: shared.nombre || "", celular: shared.celular || "", correo: shared.correo || "" } : { nombre: "", celular: "", correo: "" }));
  const [identified, setIdentified] = useState(!!((saved && saved.nombre && saved.celular) || (shared && shared.nombre && shared.celular)));
  const [convo, setConvo] = useState(null);
  const [text, setText] = useState("");
  const endRef = useRef(null);

  function refresh(id) { const c = loadConvos().find((x) => x.id === id); setConvo(c || null); }
  useEffect(() => {
    if (!identified) return;
    const id = convoId(prop.id, me.celular, me.nombre);
    refresh(id);
    const t = setInterval(() => refresh(id), 1500); // ve respuestas del vendedor
    return () => clearInterval(t);
  }, [identified, prop.id]);
  useEffect(() => { if (endRef.current) endRef.current.scrollTop = endRef.current.scrollHeight; }, [convo]);

  function start() {
    if (!me.nombre.trim() || !me.celular.trim()) return;
    localStorage.setItem(myKey, JSON.stringify(me));
    if (window.CCVRank) window.CCVRank.saveContacto({ nombre: me.nombre, celular: me.celular, correo: me.correo });
    setIdentified(true);
  }
  function send() {
    const txt = text.trim(); if (!txt) return;
    const id = convoId(prop.id, me.celular, me.nombre);
    const all = loadConvos();
    let c = all.find((x) => x.id === id);
    if (!c) {
      c = { id, propId: prop.id, propTitulo: prop.titulo, precio: prop.precio,
        inmobiliaria: prop.inmobiliaria || "Inmobiliaria del Puerto", agente: prop.agente || "Juan Pérez",
        cliente: { nombre: me.nombre.trim(), celular: me.celular.trim(), correo: me.correo.trim() },
        mensajes: [], creado: Date.now(), leido: false };
      all.unshift(c);
    }
    c.mensajes.push({ de: "cliente", texto: txt, ts: Date.now() });
    c.actualizado = Date.now(); c.leidoVendedor = false;
    saveConvos(all); setConvo({ ...c }); setText("");
    if (window.CCVRank) window.CCVRank.trackEvent(prop.id, "mensaje");
  }

  return (
    <div className="msg-overlay" onClick={(e) => { if (e.target.className === "msg-overlay") onClose(); }}>
      <div className="msg-sheet">
        <div className="msg-head">
          <div>
            <div className="mh-t">Mensaje al vendedor</div>
            <div className="mh-s">{prop.agente || "Juan Pérez"} · {prop.inmobiliaria || "Inmobiliaria del Puerto"}</div>
          </div>
          <button className="mh-x" onClick={onClose}>✕</button>
        </div>
        <div className="msg-prop">🏠 {prop.titulo} · {fmtMXN(prop.precio)}</div>

        {!identified ? (
          <div className="msg-id">
            <p>Déjanos tus datos para que el asesor pueda responderte. Tu conversación queda guardada.</p>
            <input className="msg-inp" placeholder="Tu nombre" value={me.nombre} onChange={(e) => setMe({ ...me, nombre: e.target.value })} />
            <input className="msg-inp" placeholder="Tu celular (WhatsApp)" inputMode="tel" value={me.celular} onChange={(e) => setMe({ ...me, celular: e.target.value })} />
            <input className="msg-inp" placeholder="Tu correo (opcional)" inputMode="email" value={me.correo} onChange={(e) => setMe({ ...me, correo: e.target.value })} />
            <button className="msg-start" onClick={start}>Iniciar conversación →</button>
          </div>
        ) : (
          <>
            <div className="msg-thread" ref={endRef}>
              {(!convo || !convo.mensajes.length) ? (
                <div className="msg-empty">Escribe tu primer mensaje. Por ejemplo: "Hola, me interesa esta casa, ¿sigue disponible? ¿Puedo agendar una visita?"</div>
              ) : convo.mensajes.map((m, i) => (
                <div key={i} className={"bub " + (m.de === "cliente" ? "me" : "them")}>
                  <span className="bt">{m.texto}</span>
                  <span className="bts">{new Date(m.ts).toLocaleString("es-MX", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" })}</span>
                </div>
              ))}
            </div>
            <div className="msg-compose">
              <textarea className="msg-ta" placeholder="Escribe tu mensaje…" value={text}
                onChange={(e) => setText(e.target.value)}
                onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }} />
              <button className="msg-send" onClick={send}>Enviar</button>
            </div>
            <div className="msg-foot">✓ Tu conversación queda registrada. El asesor te responderá aquí y por WhatsApp.</div>
          </>
        )}
      </div>
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "whiteButton": false,
  "accent": "#1E52C7"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [, forceSync] = useState(0);
  useEffect(() => {
    const onSync = () => forceSync((n) => n + 1);
    window.addEventListener("ccv:properties-updated", onSync);
    return () => window.removeEventListener("ccv:properties-updated", onSync);
  }, []);
  const [prop, setProp] = useState(PROPERTIES[0]);
  const [funnel, setFunnel] = useState(null);
  const [capacity, setCapacity] = useState(null);
  const [msgOpen, setMsgOpen] = useState(false);
  const [phoneShown, setPhoneShown] = useState(false);
  const [booking, setBooking] = useState(false);
  const [comparing, setComparing] = useState(false);
  const [myBookingsOpen, setMyBookingsOpen] = useState(false);
  const [lastWa, setLastWa] = useState(() => { try { return localStorage.getItem("ccv_last_wa") || ""; } catch (e) { return ""; } });
  const [profileOpen, setProfileOpen] = useState(false);
  const [buyer, setBuyer] = useState(window.CCVRank ? window.CCVRank.getBuyer() : null);
  const CIUDADES = ["CDMX", "Guadalajara", "Monterrey", "Querétaro"];
  const [heroCity, setHeroCity] = useState(0);
  useEffect(() => { const id = setInterval(() => setHeroCity((n) => (n + 1) % 4), 5000); return () => clearInterval(id); }, []);

  // Registra el historial de navegación del comprador (alimenta el Buyer Match)
  useEffect(() => { if (window.CCVRank) { const src = new URLSearchParams(location.search).get("src"); window.CCVRank.recordView(prop, src === "emily" ? "emily" : "search"); } }, [prop.id]);
  const [seg, setSeg] = useState("Todas");

  const SEGS = [
    { key: "Todas", label: "Todas" },
    { key: "Casa", label: "Casas" },
    { key: "Departamento", label: "Departamentos" },
    { key: "Desarrollo", label: "Desarrollos" },
    { key: "Terreno", label: "Terrenos" },
    { key: "Proyecto de construcción", label: "Proyectos" },
    { key: "Bodega", label: "Bodegas" },
    { key: "Oficina", label: "Oficinas" },
    { key: "Nave industrial", label: "Naves industriales" },
  ];
  const tipoIcon = window.CCV.tipoIcon;
  const visiblesRaw = seg === "Todas" ? PROPERTIES : PROPERTIES.filter((p) => p.tipo === seg);
  // Ranking inteligente: relevancia, calidad, engagement, asesor, Buyer Match, respuesta, conversión, frescura + patrocinio
  const ranked = window.CCVRank ? window.CCVRank.rank(visiblesRaw, { seg }) : visiblesRaw.map((p) => ({ prop: p, match: null, patrocinada: false }));
  const visibles = ranked.map((r) => r.prop);
  const rankInfo = {}; ranked.forEach((r) => { rankInfo[r.prop.id] = r; });
  // Apariciones en búsquedas: cada vez que la lista filtrada cambia, cuenta 1 impresión por
  // propiedad visible (deduplicado dentro de la sesión para no inflar el contador).
  useEffect(() => {
    if (!window.CCVRank) return;
    const seen = (window.__ccvImpresionesSesion = window.__ccvImpresionesSesion || new Set());
    visibles.forEach((p) => { const key = p.id + "|" + seg; if (!seen.has(key)) { seen.add(key); window.CCVRank.trackEvent(p.id, "impresion"); } });
  }, [seg, visibles.map((p) => p.id).join(",")]);
  const propMatch = (window.CCVRank && buyer) ? window.CCVRank.buyerMatch(prop, buyer) : null;

  // SEO: al cambiar de propiedad, inyecta title/meta/JSON-LD para buscadores y al compartir.
  useEffect(() => {
    const seo = window.CCV.seoFor(prop);
    document.title = seo.title;
    const setMeta = (sel, attr, val) => {
      let el = document.head.querySelector(sel);
      if (!el) { el = document.createElement("meta"); el.setAttribute(attr.split("=")[0], attr.split("=")[1]); document.head.appendChild(el); }
      el.setAttribute("content", val);
    };
    setMeta('meta[name="description"]', "name=description", seo.desc);
    setMeta('meta[name="keywords"]', "name=keywords", seo.keywords.join(", "));
    setMeta('meta[property="og:title"]', "property=og:title", seo.title);
    setMeta('meta[property="og:description"]', "property=og:description", seo.desc);
    setMeta('meta[property="og:type"]', "property=og:type", "website");
    if (prop.fotos && prop.fotos.length) setMeta('meta[property="og:image"]', "property=og:image", prop.fotos[0]);
    let ld = document.getElementById("ccv-jsonld");
    if (!ld) { ld = document.createElement("script"); ld.type = "application/ld+json"; ld.id = "ccv-jsonld"; document.head.appendChild(ld); }
    ld.textContent = JSON.stringify(seo.jsonld);
  }, [prop]);

  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--purple", t.accent);
    if (t.whiteButton) {
      r.style.setProperty("--btn-bg", "#ffffff");
      r.style.setProperty("--btn-fg", "var(--purple-deep)");
      r.style.setProperty("--btn-border", "var(--purple)");
    } else {
      r.style.setProperty("--btn-bg", "var(--purple)");
      r.style.setProperty("--btn-fg", "#ffffff");
      r.style.setProperty("--btn-border", "transparent");
    }
  }, [t]);

  return (
    <>
      <style>{css}</style>
      <header className="topbar">
        <div className="inner">
          <div className="brand">
            <span className="mark">
              <svg viewBox="0 0 34 34" width="20" height="20" fill="none"><path d="M17 4 L30 15 V30 H21 V20 H13 V30 H4 V15 Z" fill="#fff" /></svg>
            </span>
            <span>Casas y Créditos<small>Veracruz</small></span>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <a className="nav-cta" href="asistente.html" style={{ textDecoration: "none" }}>🎧 Asesora Emily</a>
            <a className="nav-cta" href="tablero.html" style={{ textDecoration: "none" }}>📊 Tablero</a>
            <a className="nav-cta" href="leads.html" style={{ textDecoration: "none" }}>🔥 Leads</a>
            <a className="nav-cta" href="admin.html" style={{ textDecoration: "none" }}>⚙️ Tasas</a>
            <a className="nav-cta" href="registro.html" style={{ textDecoration: "none" }}>Soy inmobiliario →</a>
          </div>
        </div>
      </header>

      <section className="hero">
        <div className="hero-bg" style={{ backgroundImage: "url(assets/hero-malecon.jpg)" }}></div>
        <div className="hero-stripe"></div>
        <div className="hero-scrim" />
        <div className="hero-content">
          <div className="hero-eyebrow"><span className="dot"></span>Golf · Playa · Puerto · Oficinas · Casas</div>
          <h1 className="hero-title">Todo lo que <span className="accent">somos</span>, en un solo lugar</h1>
          <p className="hero-sub">Casas, departamentos, terrenos y desarrollos con crédito hipotecario, Infonavit y Cofinavit — asesoría gratuita de principio a fin.</p>
          <div className="hero-actions">
            <a className="hero-btn primary" href="#catalogo">Explorar propiedades ↓</a>
            <a className="hero-btn ghost" href="asistente.html">💬 Habla con Emily</a>
          </div>
        </div>
      </section>

      <div className="precal-banner">
        <div><div className="pb-t">🔑 ¿Cuánto crédito alcanzas antes de elegir casa?</div><div className="pb-s">Precalifícate en 2 minutos y agenda con un asesor hipotecario.</div></div>
        <a className="pb-btn" href="precalifica.html">Precalifícate ahora →</a>
      </div>

      <div className="wrap" id="catalogo">
        <div className="crumb">{prop.estado || "Veracruz"} › {prop.ciudad} › <b>{prop.titulo}</b></div>

        {/* segment filter */}
        <div className="segbar">
          <button className="segchip" style={{ borderColor: "var(--purple)", background: buyer ? "var(--purple)" : "#fff", color: buyer ? "#fff" : "var(--purple-deep)" }} onClick={() => setProfileOpen(true)}>✨ Para ti</button>
          <button className="segchip" style={{ borderColor: "var(--purple)", color: "var(--purple-deep)" }} onClick={() => { setComparing(true); if (window.CCVRank) window.CCVRank.trackEvent(prop.id, "comparar"); }}>⚖️ Comparar</button>
          <button className="segchip" style={{ borderColor: "var(--purple)", color: "var(--purple-deep)" }} onClick={() => { setMyBookingsOpen(true); if (window.CCVRank) window.CCVRank.trackEvent(prop.id, "citas_revisadas"); }}>📅 Mis citas</button>
          {SEGS.map((s) => {
            const n = s.key === "Todas" ? PROPERTIES.length : PROPERTIES.filter((p) => p.tipo === s.key).length;
            return (
              <button key={s.key} className={"segchip" + (seg === s.key ? " on" : "")} onClick={() => {
                setSeg(s.key);
                const list = s.key === "Todas" ? PROPERTIES : PROPERTIES.filter((p) => p.tipo === s.key);
                if (list.length && !list.some((p) => p.id === prop.id)) setProp(list[0]);
              }}>
                <span className="ic">{s.key === "Todas" ? "\uD83C\uDFD8\uFE0F" : tipoIcon(s.key)}</span>
                {s.label}
                <span className="ct">{n}</span>
              </button>
            );
          })}
        </div>

        {seg === "Proyecto de construcción" && (
          <div className="proyecto-cta">
            <div className="pc-k">🏗️ Proyectos a tu medida</div>
            <div className="pc-t">Si no encontraste la casa, <b>entonces no existe</b>.<br />Hagamos el sueño posible.</div>
            <div className="pc-s">Construimos tu hogar desde cero: tú eliges terreno, distribución y acabados. Nosotros te acompañamos con el crédito y la obra, de principio a fin.</div>
            <a className="pc-btn" href="asistente.html">💬 Empezar mi proyecto →</a>
          </div>
        )}

        {/* property switcher — ordenado por el ranking inteligente */}
        <div style={{ display: "flex", gap: 8, marginBottom: 6, flexWrap: "wrap" }}>
          {visibles.map((p) => {
            const ri = rankInfo[p.id] || {};
            return (
              <button key={p.id} onClick={() => setProp(p)} style={{
                fontSize: 12.5, fontWeight: 700, padding: "8px 13px", borderRadius: 999,
                border: "1.5px solid " + (p.id === prop.id ? "var(--purple)" : ri.patrocinada ? "oklch(0.75 0.12 70)" : "var(--line)"),
                background: p.id === prop.id ? "var(--purple-soft)" : "#fff",
                color: p.id === prop.id ? "var(--purple-deep)" : "var(--ink-soft)",
                display: "inline-flex", alignItems: "center", gap: 6,
              }}>
                {ri.patrocinada && <span style={{ fontSize: 10, fontWeight: 800, color: "oklch(0.55 0.12 70)" }}>⭐ Patrocinado</span>}
                {p.tag} · {fmtMXN(p.precio)}
                {ri.match && <span style={{ fontFamily: "Sora", fontSize: 10.5, fontWeight: 800, padding: "2px 7px", borderRadius: 999, background: ri.match.score >= 80 ? "oklch(0.93 0.06 152)" : "oklch(0.95 0.05 70)", color: ri.match.score >= 80 ? "oklch(0.4 0.13 152)" : "oklch(0.48 0.12 70)" }}>✨{ri.match.score}%</span>}
              </button>
            );
          })}
        </div>
        <div style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ink-soft)", marginBottom: 16 }}>
          {buyer ? "✨ Ordenado para ti por compatibilidad, relevancia y calidad del anuncio." : "Ordenado por relevancia y calidad del anuncio. "}
          {!buyer && <button onClick={() => setProfileOpen(true)} style={{ border: "none", background: "none", color: "var(--purple-deep)", fontWeight: 800, cursor: "pointer", fontSize: 11.5, padding: 0 }}>Personalízalo →</button>}
        </div>

        <div className="grid">
          <main>
            <div className="gallery">
              {prop.fotos && prop.fotos.length ? (
                <>
                  <img className="gimg gbig" src={prop.fotos[0]} alt={window.CCV.imgAlt(prop, 0)} />
                  <img className="gimg" src={prop.fotos[1] || prop.fotos[0]} alt={window.CCV.imgAlt(prop, 1)} />
                  <img className="gimg" src={prop.fotos[2] || prop.fotos[0]} alt={window.CCV.imgAlt(prop, 2)} />
                  <span className="foto-count">📷 {prop.fotos.length} fotos</span>
                </>
              ) : (
                <>
                  <image-slot id={"g-" + prop.id + "-1"} class="big" shape="rounded" radius="16" placeholder="Foto principal"></image-slot>
                  <image-slot id={"g-" + prop.id + "-2"} shape="rounded" radius="16" placeholder="Fachada"></image-slot>
                  <image-slot id={"g-" + prop.id + "-3"} shape="rounded" radius="16" placeholder="Interior"></image-slot>
                </>
              )}
            </div>

            <div className="tagrow">
              <span className="chip">{prop.tipo}</span>
              <span className="chip">{prop.tag}</span>
              <span className="chip green">Acepta crédito</span>
              {propMatch && <MatchBadge match={propMatch} key={prop.id} />}
            </div>
            <h1 className="title">{prop.titulo}</h1>
            <div className="loc">📍 {prop.colonia}, {prop.ciudad}</div>

            <div className="specs">
              <Spec n={prop.recamaras} l="Recámaras" />
              <Spec n={prop.banos} l="Baños" />
              <Spec n={prop.estac} l={"Garage " + prop.estac + (prop.estac === 1 ? " auto" : " autos")} />
              <Spec n={prop.m2 + " m²"} l="Construcción" />
            </div>

            <div className="ficha">
              <h3 className="section-h">Ficha técnica</h3>
              <div className="ficha-grid">
                {prop.m2Terreno ? <div className="fi"><div className="fl">Terreno</div><div className="fv">{prop.m2Terreno} m²</div></div> : null}
                <div className="fi"><div className="fl">Construcción</div><div className="fv">{prop.m2} m²</div></div>
                <div className="fi"><div className="fl">Garage</div><div className="fv">{prop.estac} {prop.estac === 1 ? "auto" : "autos"}</div></div>
                <div className="fi"><div className="fl">Niveles</div><div className="fv">{prop.plantas === 1 ? "Una planta" : (prop.plantas || 1) + " plantas"}</div></div>
                <div className="fi"><div className="fl">Recámaras</div><div className="fv">{prop.recamaras}</div></div>
                <div className="fi"><div className="fl">Baños</div><div className="fv">{prop.banos}</div></div>
                {prop.recamarasVestidor ? <div className="fi"><div className="fl">Rec. con vestidor</div><div className="fv">{prop.recamarasVestidor}</div></div> : null}
              </div>
              {prop.espacios && prop.espacios.length ? (
                <div className="espacios">
                  {prop.espacios.map((e) => <span className="e" key={e}>{e}</span>)}
                </div>
              ) : null}
            </div>

            <h3 className="section-h">Sobre esta propiedad</h3>
            <p className="desc">{prop.desc}</p>

            <div className="agent">
              <span className="av">{(prop.agente || "Juan Pérez").split(" ").map((w) => w[0]).slice(0, 2).join("")}</span>
              <div>
                <div className="nm">{prop.agente || "Juan Pérez"}</div>
                <div className="sb">{prop.inmobiliaria || "Inmobiliaria del Puerto"}</div>
              </div>
              <span className="verif">{prop.vendedor === "particular" ? "🙋 Particular · Trato directo" : "✓ Asesor verificado"}</span>
            </div>

            <div className="ficha-actions">
              <button className="ficha-link msg-cta" onClick={() => setBooking(true)}>📅 Agendar visita</button>
              <button className="ficha-link" onClick={() => setMsgOpen(true)}>💬 Enviar mensaje al vendedor</button>
              <button className="ficha-link" onClick={() => { setPhoneShown(true); if (window.CCVRank) window.CCVRank.trackEvent(prop.id, "telefono"); }}>
                {phoneShown ? "📞 " + (prop.telefono || "229 000 0000") : "📞 Ver teléfono"}
              </button>
              <a className="ficha-link" href={"https://wa.me/52" + (prop.telefono || "2290000000").replace(/\D/g, "") + "?text=" + encodeURIComponent("Hola, me interesa " + prop.titulo)} target="_blank" rel="noopener" onClick={() => { if (window.CCVRank) window.CCVRank.trackEvent(prop.id, "whatsapp"); }}>📱 WhatsApp</a>
              <a className="ficha-link" href={"ficha.html?id=" + prop.id}>🖨 Ver ficha imprimible / PDF</a>
            </div>
          </main>

          <Calculator prop={prop} onPrequalify={(ctx) => setFunnel(ctx)} onCapacity={(ctx) => setCapacity(ctx)} />
        </div>
      </div>

      <footer className="site-footer">
        <div className="sf-grid">
          <div>
            <div className="sf-brand"><span className="mk">C</span>Casas y Créditos</div>
            <div className="sf-desc">Portal inmobiliario y de crédito hipotecario en Veracruz.</div>
          </div>
          <div><h5>Portal</h5><div className="sf-links"><a href="#catalogo">Propiedades</a><a href="#catalogo">Calculadora</a><a href="asistente.html">Asesora Emily</a></div></div>
          <div><h5>Empresa</h5><div className="sf-links"><a href="inmobiliario.html">Vender con nosotros</a><a href="asistente.html">Contacto</a></div></div>
          <div><h5>Legal</h5><div className="sf-links"><a href="#">Privacidad</a><a href="#">Términos</a></div></div>
        </div>
        <div className="sf-bottom">
          <span>© 2026 Casas y Créditos Veracruz</span>
          <span style={{ display: "flex", gap: 16 }}><a href="#">Instagram</a><a href="#">WhatsApp</a></span>
        </div>
      </footer>

      {funnel && <Funnel prop={prop} ctx={funnel} onClose={() => setFunnel(null)} />}

      {capacity && <CapacityFlow prop={prop} enganchePct={capacity.enganchePct} anios={capacity.anios} onClose={() => setCapacity(null)} onSaved={(b) => setBuyer(b)} />}

      {msgOpen && <MessageThread prop={prop} onClose={() => setMsgOpen(false)} />}

      {booking && <BookingModal prop={prop} onClose={(wa) => { setBooking(false); }} />}

      {myBookingsOpen && <MyBookingsModal whatsapp={lastWa} onClose={() => setMyBookingsOpen(false)} />}

      {comparing && <CompareModal properties={visibles.length >= 2 ? visibles : PROPERTIES} initial={[prop.id]} onClose={() => setComparing(false)} />}

      {profileOpen && <BuyerProfileModal onClose={() => setProfileOpen(false)} onSave={(b) => { setBuyer(b); setProfileOpen(false); }} />}

      <TweaksPanel>
        <TweakSection label="Botón principal" />
        <TweakToggle label="Botón blanco" value={t.whiteButton} onChange={(v) => setTweak("whiteButton", v)} />
        <TweakSection label="Color de acento" />
        <TweakColor label="Azul" value={t.accent} options={["#1E52C7", "#1464F4", "#0B3D91", "#2563EB"]} onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);