:root {
  --sc-canvas: #eef0f2; --sc-surface: #ffffff; --sc-ink: #111418; --sc-ink-soft: #535a64;
  --sc-accent: #1f4fd1; --sc-accent-ink: #ffffff;
  --sc-font-display: "Archivo", system-ui, sans-serif; --sc-font-text: "Geist", system-ui, sans-serif; --sc-font-mono: "Geist Mono", ui-monospace, monospace;
  --hoy: #e2e4e7; --line: rgb(17 20 24 / 0.12); --pad: clamp(16px, 3.2vw, 44px); --top: 60px;
  --page: 0; /* progreso de la página 0..1, lo escribe site.js */
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: 1.55; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; z-index: 50; background: #fff; padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 6px; }

.top { position: fixed; inset: 0 0 auto 0; height: var(--top); z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad);
  background: color-mix(in oklab, var(--sc-canvas) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sc-font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; text-decoration: none; }
.top nav { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.top nav a { text-decoration: none; color: var(--sc-ink-soft); } .top nav a:hover { color: var(--sc-ink); }
.top nav .cta-mini { color: var(--sc-accent-ink); background: var(--sc-accent); padding: 8px 14px; border-radius: 999px; font-weight: 500; }
@media (max-width: 760px) { .top nav a:not(.cta-mini) { display: none; } }

/* ── Split stage ─────────────────────────────────────────────────────────── */
.split-stage, .split[data-sc-act="flow"] { display: grid; grid-template-columns: calc(var(--split, 50) * 1%) 1fr; min-height: 100svh; }
.split[data-sc-act="flow"] { min-height: 82svh; }
.split-stage { height: 100svh; }
.col { position: relative; padding: calc(var(--top) + 28px) var(--pad) 40px; display: flex; flex-direction: column; justify-content: center; gap: 22px; min-width: 0; }
.col-hoy { background: var(--hoy); }
.col-con { background: var(--sc-canvas); }
.photo { margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 56svh; width: auto; align-self: flex-start; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.col-hoy .photo img { filter: saturate(0.82); }
.photo.short { aspect-ratio: 4 / 5; max-height: 70svh; }
.reno { position: relative; }
.reno img { position: absolute; inset: 0; opacity: 0; transition: opacity 360ms ease; }
.reno img[data-state="0"] { position: relative; opacity: 1; }
.copy { max-width: 30ch; }
h1, .h1-like { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-2xl); line-height: 1.04; letter-spacing: var(--sc-track-tight); margin: 0 0 12px; }
.col-con .h1-like { color: var(--sc-accent); }
.copy p:not(.h1-like) { color: var(--sc-ink-soft); margin: 0; max-width: 34ch; }
h2 { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.08; letter-spacing: -0.025em; margin: 0; max-width: 18ch; }
.text-col p { max-width: 42ch; }
.big { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin: 0; max-width: 20ch; }
.problem .text-col { position: relative; }
.problem .col-hoy .big { position: absolute; left: var(--pad); right: var(--pad); top: 50%; transform: translateY(-50%); }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 26px; max-width: 42ch; }
.steps li { counter-increment: s; position: relative; padding-left: 48px; color: var(--sc-ink-soft); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sc-accent); color: var(--sc-accent-ink); font: 600 14px var(--sc-font-mono); }
.steps b { color: var(--sc-ink); display: block; font-weight: 600; }
.link { color: var(--sc-accent); font-weight: 500; text-underline-offset: 4px; }
.example { font-size: var(--sc-t-sm); padding: 14px 16px; border-left: 3px solid var(--sc-accent); background: var(--sc-surface); border-radius: 4px; }

/* Casas reales */
.homes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.home { background: var(--sc-surface); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); text-decoration: none; }
.home a { text-decoration: none; display: block; }
.home img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.home .meta { padding: 12px 14px 14px; font-size: 14px; }
.home .price { font: 500 17px var(--sc-font-mono); letter-spacing: -0.02em; margin-top: 4px; }
.home .where { color: var(--sc-ink-soft); font-size: 13px; }
.home.skeleton { min-height: 240px; background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }

/* ── Divisor = chrome ────────────────────────────────────────────────────── */
.divider { position: fixed; z-index: 20; top: var(--top); bottom: 0; left: calc(var(--split, 50) * 1%); width: 0; pointer-events: none; }
.dv-line { position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: var(--line); }
.dv-fill { position: absolute; top: 0; left: 0; width: 1px; height: calc(var(--page) * 100%); background: var(--sc-accent); }
.dv-label { position: absolute; top: 14px; font: 500 12px var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.dv-left { right: 14px; color: var(--sc-ink-soft); } .dv-right { left: 14px; color: var(--sc-accent); }
.ledger { position: absolute; left: 14px; bottom: 22px; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font: 500 12px var(--sc-font-mono); }
.ledger li { opacity: 0.28; white-space: nowrap; transition: opacity 240ms ease, transform 240ms ease; transform: translateX(-4px); }
.ledger li::before { content: "○ "; }
.ledger li.done { opacity: 1; transform: none; color: var(--sc-accent); } .ledger li.done::before { content: "● "; }

/* ── Cierre: el divisor colapsa a la izquierda ───────────────────────────── */
.close-stage { height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: clamp(20px, 4vw, 64px); align-items: center;
  padding: calc(var(--top) + 24px) var(--pad) 32px; background: var(--sc-canvas); }
.close-photo { aspect-ratio: 4 / 5; max-height: 78svh; justify-self: end; }
.form-wrap { background: var(--sc-surface); border: 1px solid var(--line); border-radius: 10px; padding: clamp(18px, 2.6vw, 30px); box-shadow: 0 18px 40px -24px rgb(17 20 24 / 0.35); }
.form-wrap h2 { margin-bottom: 16px; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--sc-ink-soft); }
input, select { font: inherit; font-size: 16px; color: var(--sc-ink); height: 46px; padding: 0 12px; border: 1px solid rgb(17 20 24 / 0.22); border-radius: 8px; background: #fff; }
input:focus, select:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 22%, transparent); }
.consent { grid-template-columns: 20px 1fr; align-items: start; font-weight: 400; }
.consent input { height: 18px; margin-top: 2px; }
.cta { height: 50px; border: 0; border-radius: 999px; background: var(--sc-accent); color: var(--sc-accent-ink); font: 600 16px var(--sc-font-text); cursor: pointer;
  transition: transform 140ms cubic-bezier(0.2, 0, 0, 1), filter 160ms ease; }
.cta:hover { filter: brightness(1.08); } .cta:active { transform: scale(0.98); } .cta:disabled { opacity: 0.6; }
.form-msg { margin: 0; font-size: 14px; min-height: 1.4em; } .form-msg.bad { color: #b42318; }
.pq { display: grid; gap: 14px; } .pq fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.pq legend { font-weight: 600; margin-bottom: 4px; }
.pq .opt { display: flex; gap: 10px; align-items: center; font-weight: 400; color: var(--sc-ink); font-size: 15px; }
.pq .opt input { height: 18px; }
.result { padding: 16px; border-radius: 8px; background: color-mix(in oklab, var(--sc-accent) 9%, #fff); }

.foot { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; padding: 26px var(--pad); font-size: 13px; color: var(--sc-ink-soft); border-top: 1px solid var(--line); }
.foot a { color: var(--sc-ink-soft); }

/* ── Móvil: las columnas se apilan y el divisor se vuelve horizontal ─────── */
@media (max-width: 800px) {
  .split-stage, .split[data-sc-act="flow"] { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .split[data-sc-act="pin"] { height: auto !important; }
  .split[data-sc-act="pin"] > .split-stage { position: static !important; }
  .col { padding: 28px var(--pad); }
  .hero .col-hoy { padding-top: calc(var(--top) + 20px); }
  .photo { max-height: none; width: 100%; }
  .problem .col-hoy .big { position: static; transform: none; margin-bottom: 14px; }
  .problem [data-sc-cue] { opacity: 1 !important; transform: none !important; }
  .divider { display: none; }
  .homes { grid-template-columns: 1fr; }
  .close-stage { grid-template-columns: 1fr; height: auto; }
  .close-photo { display: none; }
  .close[data-sc-act="pin"] { height: auto !important; }
  .close-stage { position: static !important; }
}
@media (prefers-reduced-motion: reduce) { .reno img, .ledger li, .cta { transition: none; } }