/* QKStudio — formulario de presupuesto por etapas. Solo en /presupuesto. Todas las clases llevan el prefijo .wz- */

.wz-form{ display:block; }
.wz-form [hidden]{ display:none !important; }

/* Título de la tarjeta, solo para lectores de pantalla (el formulario ya es corto) */
.wz-sr{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Progreso */
.wz-progress{ display:none; margin:0 0 22px; }
.wz-form.is-wizard .wz-progress{ display:block; }
.wz-progress__label{ margin:0 0 10px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-light); }
.wz-progress__bar{ list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; }
.wz-progress__seg{ height:4px; border-radius:4px; background:var(--light-15); position:relative; overflow:hidden; }
.wz-progress__seg::after{ content:""; position:absolute; inset:0; background:var(--white); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.wz-progress__seg.is-on::after{ transform:scaleX(1); }
.wz-progress__seg.is-done{ cursor:pointer; }
.wz-progress__seg.is-done:hover{ background:var(--light-30); }

/* Etapas */
.wz-step{ margin:0 0 26px; }
.wz-form.is-wizard .wz-step{ margin:0; }
.wz-form.is-wizard .wz-step.is-active{ animation:wzIn .5s var(--ease) both; }
@keyframes wzIn{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
.wz-title{ font-size:clamp(1.45rem,2.3vw,1.9rem); line-height:1.12; letter-spacing:-.02em; margin:0 0 6px; outline:none; }
.wz-n{ font-weight:700; }
.wz-hint{ color:var(--gray-light); font-size:.92rem; line-height:1.5; margin:0 0 18px; }
.wz-step > .wz-opts, .wz-step > .wz-grid{ margin-top:20px; }
.wz-step > .wz-hint + .wz-grid{ margin-top:0; }

/* Punto de partida */
.wz-opts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.wz-opt{ position:relative; display:flex; align-items:center; gap:14px; padding:16px 18px; min-height:66px; border-radius:14px; cursor:pointer; background:rgba(241,241,241,.06); border:1px solid transparent; transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ease); line-height:1.3; font-size:.97rem; }
.wz-opt:hover{ border-color:var(--light-30); transform:translateY(-1px); }
.wz-opt input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.wz-opt__dot{ flex:none; width:14px; height:14px; border-radius:50%; background:var(--light-30); transition:background-color .3s ease, box-shadow .3s ease; }
.wz-opt__t strong{ font-weight:700; }
.wz-opt:has(input:checked){ background:var(--white); color:var(--gray-dark); }
.wz-opt:has(input:checked) .wz-opt__dot{ background:var(--gray-dark); box-shadow:0 0 0 4px rgba(38,30,37,.18); }
.wz-opt:has(input:focus-visible){ outline:2px solid var(--white); outline-offset:3px; }
.wz-error{ color:#e58a8a; font-size:.85rem; margin:12px 0 0; min-height:0; }
.wz-error:empty{ display:none; }

/* Campos de las etapas 2–4 (cajas rellenas, como en la referencia) */
.wz-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
.wz-form .qk-field.is-full, .wz-grid .is-full{ grid-column:1 / -1; }
.wz-form .qk-field input, .wz-form .qk-field textarea{ background:rgba(241,241,241,.06); border:1px solid transparent; border-radius:12px; padding:14px 16px; transition:border-color .3s ease, background-color .3s ease; }
.wz-form .qk-field input:focus, .wz-form .qk-field textarea:focus{ border-color:var(--gray-light); background:rgba(241,241,241,.09); }
.wz-form .qk-field.has-error input, .wz-form .qk-field.has-error textarea{ border-color:#e58a8a; }
.wz-form .qk-field textarea{ min-height:96px; }
.wz-form .qk-field--contexto textarea{ min-height:168px; }
.wz-quick{ margin-top:-6px; }
.wz-chip{ font:inherit; font-size:.85rem; color:var(--white); background:transparent; border:1px solid var(--light-30); border-radius:999px; padding:8px 16px; cursor:pointer; transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
.wz-chip:hover{ background:var(--white); color:var(--gray-dark); border-color:var(--white); }
.wz-chip:focus-visible{ outline:2px solid var(--white); outline-offset:2px; }

/* Navegación */
.wz-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:26px; }
.wz-nav .btn{ justify-content:center; padding-top:15px; padding-bottom:15px; }
.wz-nav .wz-next, .wz-nav .wz-submit{ margin-left:auto; min-width:min(210px,100%); }
.wz-form:not(.is-wizard) .wz-nav{ display:none; }
.wz-form .wz-legal{ margin-top:32px; }
.wz-form .form-status{ margin-top:14px; }

/* La tarjeta ya no necesita ser alta: se deja de recortar con scroll interno */
.wz-card{ position:relative; top:auto; max-height:none; overflow:visible; }

/* Sin JavaScript: todas las etapas seguidas */
html:not(.js) .wz-step{ margin-bottom:34px; }

@media (max-width:520px){
  .wz-opts{ grid-template-columns:minmax(0,1fr); }
  .wz-grid{ grid-template-columns:minmax(0,1fr); }
  .wz-opt{ min-height:58px; padding:14px 16px; }
  .wz-nav .wz-next, .wz-nav .wz-submit{ flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce){
  .wz-form.is-wizard .wz-step.is-active{ animation:none; }
  .wz-progress__seg::after, .wz-opt{ transition:none; }
}