/* ===========================================================
   Form conversacional multi-paso — Amancay
   =========================================================== */
/* La tarjeta blanca del form (form.js renderiza <form class="lf">) */
.lf{max-width:560px;margin-inline:auto;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,5vw,40px);position:relative}

.lf__progress{display:flex;gap:6px;margin-block-end:var(--s4)}
.lf__progress span{height:4px;flex:1;border-radius:2px;background:var(--sand);transition:background .4s var(--ease)}
.lf__progress span.is-done{background:var(--gold)}
.lf__progress span.is-active{background:var(--yellow)}

.lf__step{display:none;animation:lfin .45s var(--ease)}
.lf__step.is-active{display:block}
@keyframes lfin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lf__step{animation:none}}

.lf__q{font-size:1.35rem;font-weight:400;line-height:1.25;margin-block-end:6px}
.lf__hint{font-size:.9rem;color:var(--muted);margin-block-end:var(--s3)}

/* opciones tipo tarjeta-tap */
.lf__opts{display:grid;gap:12px}
@media(min-width:480px){.lf__opts--2{grid-template-columns:1fr 1fr}}
.lf__opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  min-height:56px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius);
  font-size:1rem;transition:border-color var(--dur),background var(--dur),transform var(--dur)}
.lf__opt:hover{border-color:var(--gold)}
.lf__opt:active{transform:scale(.99)}
.lf__opt.is-sel{border-color:var(--ink);background:var(--cream)}
.lf__opt .tick{margin-inline-start:auto;width:20px;height:20px;color:var(--gold);opacity:0;transition:opacity var(--dur)}
.lf__opt.is-sel .tick{opacity:1}

/* inputs */
.lf__field{margin-block-end:var(--s2)}
.lf__field label{display:block;font-size:.85rem;font-weight:500;margin-block-end:7px}
.lf__field input{width:100%;min-height:52px;padding:0 16px;border:1px solid var(--line);
  border-radius:var(--radius);font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;
  transition:border-color var(--dur)}
.lf__field input:focus{outline:none;border-color:var(--gold)}
.lf__field input[aria-invalid="true"]{border-color:#C0392B}
.lf__err{display:block;font-size:.82rem;color:#C0392B;margin-block-start:6px;min-height:1em}

.lf__consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--muted);margin-block:var(--s3)}
.lf__consent input{margin-block-start:3px;width:18px;height:18px;flex:none;accent-color:var(--gold)}
.lf__consent a{color:var(--gold-deep);text-decoration:underline}

.lf__nav{display:flex;gap:12px;margin-block-start:var(--s4)}
.lf__back{min-height:52px;padding:0 18px;border:1px solid var(--line);border-radius:var(--radius);color:var(--muted)}
.lf__back:hover{border-color:var(--ink);color:var(--ink)}
.lf__next{flex:1}

/* éxito */
.lf__success{display:none;text-align:center;padding-block:var(--s3)}
.lf__success.is-active{display:block;animation:lfin .5s var(--ease)}
.lf__success svg{width:56px;height:56px;color:var(--gold);margin-inline:auto;margin-block-end:var(--s2)}
.lf__success h3{font-size:1.5rem;margin-block-end:8px}
.lf__success p{color:var(--muted)}

.lf__spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(0,0,0,.25);
  border-top-color:#000;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lf[aria-busy="true"] .lf__next{pointer-events:none;opacity:.85}