/* Armoniats · Asistente de contacto compartido (una pregunta por pantalla).
   La misma tarjeta .wizard en contacto.html, formacion.html y
   desarrollo-a-medida.html. Lógica en assets/contacto-wizard.js. */
.wizard{background:var(--ivory);color:var(--graphite);border-radius:var(--r-panel);box-shadow:0 40px 90px rgba(0,0,0,.35);padding:clamp(26px,4vw,48px) clamp(22px,5vw,64px) clamp(30px,4vw,44px);min-height:460px;display:flex;flex-direction:column}
.wz-top{display:flex;align-items:center;gap:16px;margin-bottom:10px;min-height:34px}
.wz-back{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--muted);background:none;border:0;cursor:pointer;padding:6px 2px;visibility:hidden}
.wz-back svg{width:15px;height:15px}
.wz-back.show{visibility:visible}
.wz-back:hover{color:var(--green)}
.wz-count{margin-left:auto;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.wz-bar{height:5px;border-radius:5px;background:#E3E9E1;overflow:hidden;margin-bottom:8px}
.wz-fill{height:100%;width:0;border-radius:5px;background:var(--accent);transition:width .45s var(--ease)}
#qbox{flex:1;display:flex;flex-direction:column;justify-content:center;padding:18px 0 8px}
.qstep.enter{animation:qin .45s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.q-title{font-size:var(--fs-h3);letter-spacing:-.02em;margin-bottom:6px;text-wrap:balance}
.q-sub{font-size:var(--fs-body-s);color:var(--muted);margin-bottom:24px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{display:flex;align-items:center;gap:14px;text-align:left;font:inherit;font-size:var(--fs-body);font-weight:500;color:var(--graphite);background:var(--white);border:1px solid var(--line);border-radius:16px;padding:17px 18px;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.opt:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(18,40,28,.12);border-color:var(--green)}
.opt .key{flex-shrink:0;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.opt.sel{background:var(--deep);border-color:var(--deep);color:var(--ivory)}
.opt.sel .key{border-color:rgba(246,244,237,.4);color:var(--ivory)}
.opt.sel small{color:#C9D8CC}
.opt small{font-weight:400;color:var(--muted);font-size:var(--fs-small)}
.wz-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.wz-fields .wide{grid-column:1/-1}
.wz-note{font-size:var(--fs-small);color:var(--muted);margin-top:6px}
.wz-note a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.wz-actions{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}
.wz-actions .btn{border:0}
.wz-enter{font-size:var(--fs-small);color:var(--muted)}
.wz-skip{font:inherit;font-size:var(--fs-small);font-weight:600;color:var(--green);background:none;border:0;cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.wz-skip:hover{color:var(--deep)}
.wz-error{font-size:var(--fs-small);color:var(--error);font-weight:600;min-height:18px;margin-top:10px}
.wz-error-campo{min-height:0;margin:6px 0 10px}
/* Pantallas táctiles: los atajos de teclado no aplican */
@media(hover:none){.wz-enter{display:none}}
.wz-success{text-align:center;padding:24px 0}
.wz-success .ok-ring{width:72px;height:72px;margin:0 auto 22px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}
.wz-success .ok-ring svg{width:34px;height:34px;color:var(--deep)}
.wz-success h2{font-size:var(--fs-h3);margin-bottom:10px}
.wz-success p{color:var(--muted);font-size:var(--fs-body);max-width:480px;margin:0 auto}
.wz-success .wz-actions{justify-content:center;margin-top:26px}
@media(max-width:720px){
  .opts,.wz-fields{grid-template-columns:1fr}
  .wizard{min-height:420px}
  .opt .key{display:none}
  .wz-enter{display:none}
}
@media(prefers-reduced-motion:reduce){
  .qstep.enter{animation:none}
  .wz-fill{transition:none}
  .opt{transition:none}
  .opt:hover{transform:none}
}