/* Formulario de evaluacion de Web Factory — sustituye al survey de GoHighLevel.
   Sin fondo propio: se apoya en el degradado que ya trae la pagina. */
.wff{--wff-line:rgba(255,255,255,.55);color:#fff;font-family:inherit;
  max-width:720px;margin:0 auto;padding:8px 18px 40px;text-align:center;
  min-height:520px;display:flex;flex-direction:column;justify-content:center}
.wff *{box-sizing:border-box}
.wff-intro{font-size:clamp(15px,2.1vw,18px);line-height:1.62;margin:0 0 26px;font-weight:400}
.wff-q{font-size:clamp(15px,2.1vw,18px);font-weight:700;margin:0 0 30px;line-height:1.5}
.wff-step{animation:wff-in .28s ease}
@keyframes wff-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.wff-input{width:100%;max-width:540px;margin:0 auto;display:block;background:transparent;
  border:1px solid var(--wff-line);border-radius:7px;padding:14px 16px;color:#fff;
  font:inherit;font-size:15px;outline:none;transition:border-color .15s}
.wff-input::placeholder{color:rgba(255,255,255,.72)}
.wff-input:focus{border-color:#fff}
.wff-input.bad{border-color:#ff8f8f}
.wff-field{position:relative;max-width:540px;margin:0 auto 14px}
.wff-field .wff-ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  opacity:.8;pointer-events:none;display:flex}
.wff-field .wff-ico+.wff-input{padding-left:42px}

/* rejilla de opciones con icono */
.wff-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin-bottom:34px}
.wff-opt{background:none;border:0;cursor:pointer;color:#fff;font:inherit;padding:10px 6px;
  width:118px;display:flex;flex-direction:column;align-items:center;gap:14px;
  border-radius:12px;transition:background .15s,transform .15s}
.wff-opt:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.wff-opt.on{background:rgba(255,255,255,.16);outline:1px solid rgba(255,255,255,.55)}
.wff-opt svg{width:64px;height:64px;flex:none}
.wff-opt .wff-lbl{font-size:13.5px;line-height:1.32;font-weight:400}

/* navegacion */
.wff-nav{display:flex;justify-content:center;align-items:center;gap:34px;margin-top:6px}
.wff-nav button{background:none;border:0;color:#fff;font:inherit;font-size:14px;
  font-weight:700;cursor:pointer;padding:9px 14px;border-radius:8px}
.wff-nav button:hover{background:rgba(255,255,255,.12)}
.wff-nav button:disabled{opacity:.45;cursor:default;background:none}
.wff-prev{font-weight:400!important}

.wff-bar{height:2px;background:rgba(255,255,255,.2);border-radius:2px;max-width:540px;
  margin:26px auto 0;overflow:hidden}
.wff-bar i{display:block;height:100%;background:#fff;border-radius:2px;transition:width .3s}
.wff-err{color:#ffc9c9;font-size:13px;min-height:18px;margin-top:12px}

/* pantalla final */
.wff-done h3{font-size:clamp(19px,3vw,26px);margin:0 0 12px;font-weight:800}
.wff-price{font-size:clamp(26px,5vw,40px);font-weight:800;margin:18px 0 8px;letter-spacing:-.5px}
.wff-done p{font-size:15px;line-height:1.6;margin:0 auto;max-width:460px}

@media(max-width:520px){
  .wff-opts{gap:10px 18px}
  .wff-opt{width:96px}
  .wff-opt svg{width:52px;height:52px}
}