/* Secciones nuevas de ht.habitatrealtygroupai.com — reutilizan la paleta
   negro/verde WhatsApp de los bloques existentes (--dk-*). */
.ht-sec { padding: 96px 0; }
.ht-wide { max-width: 1080px; margin: 0 auto; padding: 0 24px; text-align: center; }
.ht-sec .dk-lede { max-width: 640px; margin-left: auto; margin-right: auto; }
.ht-grid { display: grid; gap: 16px; margin-top: 48px; text-align: left; grid-template-columns: repeat(2, 1fr); }
.ht-card { border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 28px; background: rgba(255,255,255,.03); }
.ht-card-sector { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dk-amber, #25d366); font-weight: 600; }
.ht-card h3 { font-size: 22px; margin: 8px 0 10px; color: var(--dk-cream, #f2f2f2); }
.ht-card p { color: #a8a8a8; font-size: 15px; line-height: 1.6; }
.ht-card-state { display: inline-block; margin-top: 14px; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: #cfcfcf; }
.ht-card-state.on { border-color: #25d366; color: #25d366; }
.ht-stats { display: flex; gap: 22px; margin-top: 16px; flex-wrap: wrap; }
.ht-stat b { display: block; font-size: 26px; color: #fff; line-height: 1.1; }
.ht-stat span { font-size: 12px; color: #8a8a8a; }
.ht-note { margin-top: 28px; font-size: 12.5px; color: #7d7d7d; }
.ht-steps { counter-reset: s; display: grid; gap: 0; margin-top: 48px; text-align: left; max-width: 720px; margin-left: auto; margin-right: auto; }
.ht-step { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.12); }
.ht-step:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.ht-step-n { color: var(--dk-amber, #25d366); font-size: 14px; font-weight: 600; padding-top: 4px; }
.ht-step h3 { font-size: 20px; color: #f2f2f2; margin-bottom: 6px; }
.ht-step p { color: #a8a8a8; font-size: 15px; }
.ht-three { display: grid; gap: 24px; margin-top: 48px; text-align: left; grid-template-columns: repeat(3, 1fr); }
.ht-three h3 { font-size: 18px; color: #f2f2f2; margin-bottom: 8px; }
.ht-three p { color: #a8a8a8; font-size: 15px; }
.ht-three > div { border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; }
.ht-faq { max-width: 720px; margin: 48px auto 0; text-align: left; }
.ht-faq details { border-top: 1px solid rgba(255,255,255,.14); padding: 18px 0; }
.ht-faq details:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.ht-faq summary { cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; color: #f2f2f2; display: flex; justify-content: space-between; gap: 16px; }
.ht-faq summary::-webkit-details-marker { display: none; }
.ht-faq summary::after { content: '+'; font-size: 22px; line-height: 1; color: #25d366; }
.ht-faq details[open] summary::after { content: '–'; }
.ht-faq details p { margin-top: 12px; color: #a8a8a8; font-size: 15px; line-height: 1.65; }
.ht-faq summary:focus-visible, .ht-cta-link:focus-visible { outline: 2px solid #25d366; outline-offset: 4px; }
.ht-cta-link { display: inline-block; margin-top: 36px; background: #25d366; color: #04210f; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: 14px; border-radius: 999px; padding: 15px 28px; }
.footer-legal a { text-decoration: underline; }
.ht-legal { max-width: 720px; margin: 0 auto; padding: 72px 24px; font-family: 'Manrope', sans-serif; line-height: 1.7; color: #1c1208; }
.ht-legal h1 { font-size: 34px; margin-bottom: 8px; } .ht-legal h2 { font-size: 20px; margin: 28px 0 8px; }
.ht-legal a { color: #0f6b4f; text-decoration: underline; }
@media (max-width: 760px) {
  .ht-sec { padding: 64px 0; }
  .ht-grid, .ht-three { grid-template-columns: 1fr; }
}

/* ---- KPIs y pauta (maqueta ilustrativa) ---- */
.ht-dash { margin: 48px auto 0; max-width: 920px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: #0c0c0c; text-align: left; overflow: hidden; }
.ht-dash-tabs { display: flex; gap: 22px; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.1); overflow-x: auto; font-size: 13px; color: #8a8a8a; white-space: nowrap; }
.ht-dash-tabs .on { color: #f2f2f2; border-bottom: 2px solid #25d366; padding-bottom: 12px; margin-bottom: -15px; }
.ht-dash-body { padding: 22px; }
.ht-dash-tag { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #8a8a8a; margin-bottom: 14px; }
.ht-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ht-kpi { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,.03); }
.ht-kpi small { display: block; font-size: 12px; color: #8a8a8a; }
.ht-kpi b { display: block; font-size: 26px; color: #fff; margin: 4px 0 2px; }
.ht-kpi span { font-size: 12px; color: #25d366; }
.ht-kpi span.bad { color: #ff7a7a; }
.ht-funnel { margin-top: 18px; display: grid; gap: 8px; }
.ht-funnel-row { display: grid; grid-template-columns: 130px 1fr 40px; gap: 12px; align-items: center; font-size: 13px; color: #cfcfcf; }
.ht-funnel-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.ht-funnel-bar i { display: block; height: 100%; background: #25d366; border-radius: 99px; }
.ht-funnel-row em { font-style: normal; text-align: right; color: #8a8a8a; }
.ht-agile { margin-top: 40px; font-size: 18px; color: #f2f2f2; max-width: 640px; margin-left: auto; margin-right: auto; }
.ht-agile b { color: #25d366; }
@media (max-width: 760px) { .ht-kpis { grid-template-columns: repeat(2, 1fr); } .ht-funnel-row { grid-template-columns: 96px 1fr 34px; } }

/* ---- páginas de servicio (promotores / ads) ---- */
.ht-page { background: #000; margin: 0; font-family: 'Manrope', sans-serif; }
.ht-skip { position: absolute; left: -999px; top: 8px; background: #25d366; color: #04210f; padding: 8px 14px; border-radius: 8px; z-index: 200; }
.ht-skip:focus { left: 8px; }
.ht-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 24px; background: rgba(0,0,0,.85); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); }
.ht-nav-brand { color: #f2f2f2; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ht-nav-brand img { display: block; }
.ht-nav nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ht-nav nav a { color: #a8a8a8; font-size: 14px; }
.ht-nav nav a:hover, .ht-nav nav a[aria-current="page"] { color: #fff; }
.ht-nav-login { border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 6px 14px; color: #f2f2f2 !important; }
.ht-hero { padding-top: 120px; padding-bottom: 96px; }
.ht-h1 { font-size: clamp(34px, 6vw, 60px); line-height: 1.08; }
.ht-hero-cta { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }
.ht-hero-cta .ht-cta-link { margin-top: 0; }
.ht-ghost { color: #f2f2f2; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 14px 24px; font-size: 14px; }
.ht-foot { padding: 40px 24px; text-align: center; color: #7d7d7d; font-size: 13px; border-top: 1px solid rgba(255,255,255,.08); }
.ht-foot a { text-decoration: underline; }
@media (max-width: 760px) { .ht-hero { padding-top: 80px; padding-bottom: 64px; } .ht-nav { padding: 12px 16px; } .ht-nav nav { gap: 14px; } }

/* separación entre secciones consecutivas (styles.css anula el padding superior de .dk-band + .dk-band) */
.dk-band.ht-sec + .dk-band.ht-sec { padding-top: 96px; }
@media (max-width: 760px) { .dk-band.ht-sec + .dk-band.ht-sec { padding-top: 64px; } }

.ht-time { list-style: none; margin: 32px 0 0; padding: 0; border-left: 2px solid rgba(37,211,102,.4); }
.ht-time li { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 0 0 28px 28px; }
.ht-time li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #25d366; }
.ht-time time { color: #25d366; font-weight: 700; font-size: 14px; padding-top: 4px; }
.ht-time h3 { margin: 0 0 6px; font-size: 20px; color: #f2f2f2; }
.ht-time p { margin: 0; color: #a8a8a8; font-size: 15px; line-height: 1.6; }
.ht-cal { background: #fff; border-radius: 16px; overflow: hidden; }
@media (max-width: 640px) { .ht-time li { grid-template-columns: 1fr; gap: 4px; } }
.ht-time, .ht-time li { text-align: left; }

.ht-about { display: grid; grid-template-columns: minmax(0,320px) 1fr; gap: 40px; align-items: start; margin-top: 24px; text-align: left; }
.ht-about img { width: 100%; height: auto; border-radius: 16px; }
.ht-about p { color: #a8a8a8; font-size: 16px; line-height: 1.7; margin: 0 0 16px; }
.ht-about .ht-about-sig { color: #f2f2f2; }
@media (max-width: 760px) { .ht-about { grid-template-columns: 1fr; } .ht-about img { max-width: 320px; } }

/* ---- MacBook Pro mockup + página /trace/ ---- */
.mac { position: relative; width: 100%; max-width: var(--mw, 880px); margin: 0 auto; }
.mac-lid { position: relative; background: #0b0b0b; border-radius: 20px 20px 6px 6px; padding: 16px 14px 14px; border: 1px solid #333; box-shadow: inset 0 0 0 2px #181818, 0 40px 90px rgba(0,0,0,.65), 0 0 90px rgba(37,211,102,.10); }
.mac-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 12%; min-width: 64px; height: 17px; background: #0b0b0b; border-radius: 0 0 10px 10px; z-index: 3; }
.mac-notch::after { content: ""; position: absolute; top: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #16241e; box-shadow: 0 0 0 1px #223; }
.mac-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 5px; background: #fff; }
.mac-screen img { display: block; width: 100%; height: auto; will-change: transform; }
.mac-screen img.stack { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .5s; }
.mac-screen img.stack.on { opacity: 1; }
.mac-base { position: relative; height: 15px; margin: 0 -5%; background: linear-gradient(#d6d6d6, #a4a4a4 55%, #7a7a7a); border-radius: 0 0 22px 22px / 0 0 14px 14px; box-shadow: 0 18px 30px rgba(0,0,0,.5); }
.mac-base::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 18%; height: 6px; background: #8d8d8d; border-radius: 0 0 9px 9px; }
.mac-cap { margin: 18px 0 0; font-size: 13px; color: #8a8a8a; text-align: center; }
.tr-hero { padding-top: 96px; text-align: center; }
.tr-hero .dk-h2 { font-size: clamp(34px, 6vw, 62px); line-height: 1.08; }
.tr-stage { position: relative; margin-top: 56px; --mw: 940px; }
.tr-phone { position: absolute; right: -2%; bottom: -26px; width: 19%; min-width: 96px; border-radius: 22px; border: 6px solid #0b0b0b; box-shadow: 0 24px 50px rgba(0,0,0,.6), 0 0 0 1px #333; overflow: hidden; background: #fff; z-index: 4; }
.tr-phone img { display: block; width: 100%; height: auto; }
.tr-day { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 40px; margin-top: 48px; text-align: left; align-items: start; }
.tr-sticky { position: sticky; top: 96px; --mw: 840px; }
.tr-step { padding: 34px 0; min-height: 50vh; border-top: 1px solid rgba(255,255,255,.12); }
.tr-step:first-child { border-top: 0; }
.tr-time { color: #25d366; font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.tr-verb { font-size: clamp(30px, 4vw, 44px); font-weight: 700; margin: 6px 0 10px; color: #f2f2f2; letter-spacing: -.02em; line-height: 1.1; }
.tr-step p { color: #a8a8a8; font-size: 16px; line-height: 1.65; max-width: 460px; margin: 0 0 14px; }
.tr-measure { display: inline-block; font-size: 13.5px; font-weight: 600; color: #25d366; border: 1px solid rgba(37,211,102,.5); border-radius: 999px; padding: 6px 14px; }
.tr-step .mac { display: none; margin-top: 22px; --mw: 100%; }
.tr-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 36px auto 32px; max-width: 900px; }
.tr-tab { font: inherit; font-size: 13.5px; color: #cfcfcf; background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.tr-tab[aria-selected="true"] { background: #25d366; border-color: #25d366; color: #04210f; font-weight: 700; }
.tr-tab:focus-visible { outline: 2px solid #25d366; outline-offset: 3px; }
.tr-two { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr); gap: 40px; align-items: center; margin-top: 56px; text-align: left; }
.tr-two h3 { font-size: 24px; color: #f2f2f2; margin: 0 0 10px; }
.tr-two p { color: #a8a8a8; font-size: 16px; line-height: 1.65; margin: 0 0 12px; }
.tr-two .mac { --mw: 100%; }
.tr-list { list-style: none; padding: 0; margin: 18px 0 0; }
.tr-list li { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.12); color: #a8a8a8; font-size: 15px; line-height: 1.6; }
.tr-list li b { color: #f2f2f2; }
.tr-bio { max-width: 720px; margin: 28px auto 0; color: #a8a8a8; font-size: 17px; line-height: 1.7; }
.tr-bio a { color: #25d366; text-decoration: underline; }
@media (max-width: 900px) {
  .tr-hero { padding-top: 64px; }
  .tr-day, .tr-two { grid-template-columns: 1fr; gap: 28px; }
  .tr-sticky { display: none; }
  .tr-step { min-height: 0; }
  .tr-step .mac { display: block; }
  .tr-phone { right: 0; bottom: -18px; }
  .mac-lid { padding: 12px 8px 8px; border-radius: 14px 14px 4px 4px; }
}
@media (prefers-reduced-motion: reduce) { .mac-screen img.stack { transition: none; } }
#dia.dk-band { overflow: clip; }
#dia .ht-wide { max-width: 1280px; }

.tr-two.rev { grid-template-columns: minmax(0,1.4fr) minmax(0,.8fr); }
#datos-que-deciden .ht-wide, #control .ht-wide { max-width: 1240px; }
@media (max-width: 900px) { .tr-two, .tr-two.rev { grid-template-columns: 1fr; } }

/* ---- alternancia oscuro / claro (quienes-somos y ads) ---- */
.ht-alt main > section:nth-of-type(even) { background: #fff; color: #151515; }
.ht-alt main > section:nth-of-type(even) .dk-eyebrow { color: #0f6b4f; font-weight: 700; }
.ht-alt main > section:nth-of-type(even) .dk-h2 { color: #151515; font-weight: 600; }
.ht-alt main > section:nth-of-type(even) .dk-lede { color: #555; }
.ht-alt main > section:nth-of-type(even) .ht-three h3,
.ht-alt main > section:nth-of-type(even) .ht-step h3,
.ht-alt main > section:nth-of-type(even) .ht-about .ht-about-sig,
.ht-alt main > section:nth-of-type(even) .ht-faq summary { color: #151515; }
.ht-alt main > section:nth-of-type(even) .ht-three p,
.ht-alt main > section:nth-of-type(even) .ht-step p,
.ht-alt main > section:nth-of-type(even) .ht-about p,
.ht-alt main > section:nth-of-type(even) .ht-faq details p { color: #4d4d4d; }
.ht-alt main > section:nth-of-type(even) .ht-three > div,
.ht-alt main > section:nth-of-type(even) .ht-step,
.ht-alt main > section:nth-of-type(even) .ht-faq details { border-color: #dcdcdc; }
.ht-alt main > section:nth-of-type(even) .ht-step-n,
.ht-alt main > section:nth-of-type(even) .ht-faq summary::after { color: #0f6b4f; }
.ht-alt main > section:nth-of-type(even) .ht-note { color: #666; }
.ht-alt main > section:nth-of-type(even) a:not(.ht-cta-link) { color: #0f6b4f; }
/* fundador: texto justificado */
.ht-about p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.ht-about p.ht-about-sig { text-align: left; hyphens: none; }