/* From Loan to Keys · formularios por pasos (Rentar, Comprar, Invertir, Financiamiento)
   Se suma a forms.css (no lo reemplaza). Mismos colores crema y dorado de la página. */

/* ---------- barra de progreso ---------- */
.flow .fprog{display:none;margin:0 0 22px}
html.js .flow .fprog{display:block}
.fprog-row{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-ink)}
.fprog-bar{height:5px;border-radius:5px;background:#eadfc6;overflow:hidden}
.fprog-bar i{display:block;height:100%;width:0;background:var(--gold-g);border-radius:5px;transition:width .35s ease}

/* ---------- pasos ---------- */
html.js .flow .fstep{display:none;border:0;margin:0;padding:0;min-width:0}
html.js .flow .fstep.is-active{display:block;animation:fin .28s ease both}
@keyframes fin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html.js .flow .fstep.is-active{animation:none}.fprog-bar i{transition:none}}
html:not(.js) .flow .fstep{border-top:1px solid #eadfc6;padding-top:22px;margin-top:22px}
.flow .fq-title{font:normal 24px/1.25 Georgia,serif;color:#2a2418;margin:0 0 6px}
.flow .fq-sub{font-size:14px;color:var(--dim);margin:0 0 20px}
.flow [data-when][hidden]{display:none!important}
.flow .fgroup{margin:0 0 20px}
.flow .fgroup-title{display:block;font-size:15px;font-weight:600;color:#2a2418;margin:0 0 9px}

/* ---------- botones de navegación ---------- */
.flow .fnav{display:flex;gap:10px;margin-top:26px}
.flow .fnav .btn{margin-top:0;flex:1}
.flow .fnav .fback{flex:0 0 38%}
/* enviar solo aparece en el último paso; sin JavaScript todo el formulario se ve y se envía */
.flow .fsend{display:none}
html.js .flow.on-last .fsend{display:flex}
html.js .flow.on-last .fnext{display:none}
html:not(.js) .flow .fsend{display:flex}
html:not(.js) .flow .fnext,html:not(.js) .flow .fback{display:none}
.flow .fback[hidden]{display:none!important}

/* ---------- campos de dinero ---------- */
.money{position:relative}
.money>b{position:absolute;left:14px;top:14px;font:600 16px/24px Arial,Helvetica,sans-serif;color:var(--gold-ink);pointer-events:none}
.money input{padding-left:30px}
.money-pretty{font-size:13px;color:var(--dim);margin:6px 0 0;min-height:18px}
.flow input[type=date]{width:100%;min-height:52px;padding:13px 14px;background:#fff;border:1px solid var(--line);border-radius:2px;color:var(--ink);font:16px/1.4 Arial,Helvetica,sans-serif}
.flow input[type=date]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,145,74,.28)}
.flow input[type=number]{-moz-appearance:textfield}

/* total combinado de ingresos */
.inc-total{margin:4px 0 0;padding:14px 16px;border-left:3px solid #c9a45c;background:#faf3e1;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.inc-total span{font-size:14px;color:#4a4336}
.inc-total strong{font:normal 24px/1.1 Georgia,serif;color:#2a2418}

/* ---------- errores por paso ---------- */
.flow .step-error{display:none;margin:14px 0 0;padding:12px 14px;border:1px solid #e0a79e;background:#fdeeeb;color:var(--err);font-size:14px;border-radius:2px}
.flow .step-error.show{display:block}

/* ---------- avisos suaves ---------- */
.flow .note-box{margin:14px 0 0;padding:12px 14px;border-left:3px solid #c9a45c;background:#faf3e1;font-size:14px;line-height:1.55;color:#4a4336}
.flow .disclaimer-box{margin:16px 0 0;font-size:13px;color:var(--dim)}

/* ---------- tarjetas de caminos (perfil Realtor) ---------- */
.profile{display:flex;align-items:center;gap:18px;margin:0 0 18px;text-align:left}
.profile img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid #b8914a;box-shadow:0 0 0 4px var(--paper),0 0 0 5px #d9c9a0;flex-shrink:0}
.profile h1{text-align:left;margin:0 0 4px;font-size:clamp(28px,7vw,36px)}
.profile .role{margin:0;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-ink)}
.profile-bio{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 18px}
.paths{display:grid;gap:12px;margin:0 0 26px}
.path{display:flex;align-items:center;gap:16px;padding:20px 20px;background:var(--paper);border:1px solid var(--cardline);border-radius:2px;text-decoration:none;color:inherit;box-shadow:0 10px 26px rgba(70,52,16,.07);transition:border-color .2s,transform .2s,box-shadow .2s;min-height:76px}
.path:hover{border-color:#b8914a;transform:translateY(-2px);box-shadow:0 14px 34px rgba(70,52,16,.12)}
.path:focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px}
.path.is-open{border-color:#b8914a;background:#faf3e1}
.path svg{width:30px;height:30px;color:var(--gold-ink);flex-shrink:0}
.path h2{font:normal 22px/1.2 Georgia,serif;margin:0 0 2px;color:#241e14}
.path p{margin:0;font-size:13.5px;color:var(--dim)}
.path .arrow{margin-left:auto;color:var(--gold-ink);font-size:20px}
html.js .pathpanel{display:none;scroll-margin-top:18px}
html.js .pathpanel.is-open{display:block}
.pathpanel>.panel-title{font:normal 26px/1.2 Georgia,serif;text-align:center;margin:0 0 6px;color:#1f1a12}
.pathpanel>.panel-sub{font:italic 17px/1.45 Georgia,serif;color:var(--gold-ink);text-align:center;margin:0 0 18px}
html:not(.js) .pathpanel{margin:0 0 30px}
.wa-line{margin:0 0 22px}
.wa-line .btn{margin-top:0}

/* ---------- confirmación (gracias) ---------- */
.ty-summary{margin:0 0 18px;padding:14px 16px;border-left:3px solid #c9a45c;background:#faf3e1;text-align:left;font-size:14px;line-height:1.6;color:#4a4336}
.ty-summary b{color:#2a2418}
.ty-hi{font:italic 20px/1.4 Georgia,serif;color:#2a2418;margin:0 0 12px!important}

/* ---------- TikTok + catálogo (Rentar) ---------- */
.promo{margin:30px 0 0;padding:24px 20px;border:1px solid var(--cardline);border-top:2px solid #c9a45c;background:var(--paper);border-radius:2px;box-shadow:0 14px 34px rgba(70,52,16,.10);text-align:center}
.promo h2{font:normal 26px/1.2 Georgia,serif;color:#1f1a12;margin:0 0 8px}
.promo>p{font-size:15px;line-height:1.6;color:var(--muted);margin:0 0 16px}
.promo .eyebrow{margin-bottom:8px}
.promo .btn{margin-top:14px}
.promo .tt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:560px;margin:6px auto 0;text-align:left}
.promo .tt-card{display:block;color:inherit;text-decoration:none;border:1px solid var(--cardline);border-radius:12px;overflow:hidden;background:#fff;transition:transform .2s,border-color .2s}
.promo .tt-card:hover,.promo .tt-card:focus-visible{transform:translateY(-3px);border-color:#c9a45c}
.promo .tt-thumb{position:relative;display:block;aspect-ratio:3/4;background:#111}
.promo .tt-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.promo .tt-play{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(10,10,10,.6);border:2px solid #d6b773}
.promo .tt-play:after{content:"";position:absolute;left:18px;top:12px;border-style:solid;border-width:10px 0 10px 15px;border-color:transparent transparent transparent #d6b773}
.promo .tt-cap{display:block;padding:10px 12px 12px;font-size:14px;line-height:1.35;color:#1f1a12}
.promo .tt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.promo + .promo{margin-top:18px}

/* ---------- campos marcados ---------- */
.flow input.bad,.flow textarea.bad,.flow select.bad{border-color:#c0594a;box-shadow:0 0 0 3px rgba(192,89,74,.15)}
.flow .fgroup.bad .chip>span,.flow .field.bad .chip>span,.flow .fgroup.bad .consent{border-color:#c0594a}
.flow .fgroup.bad>.fgroup-title,.flow .field.bad>.group-label{color:var(--err)}
.social-line{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 18px}
.sbtn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border:1px solid var(--gold);border-radius:2px;color:var(--gold-ink);text-decoration:none;font:600 14px Arial,sans-serif;background:transparent}
.sbtn svg{width:18px;height:18px}.sbtn:hover{background:#faf3e1}
.sbtn:focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px}