/* ============================================================
   EL MODAL DE 3 PASOS
   Paso 1 datos · Paso 2 tres preguntas · Paso 3 intención
   ============================================================ */

.capa{
  position:fixed;inset:0;z-index:100;
  background:rgba(6,6,7,.82);backdrop-filter:blur(7px);
  display:none;align-items:flex-start;justify-content:center;
  padding:28px 16px;overflow-y:auto;
}
.capa.on{display:flex}

.caja{
  width:100%;max-width:520px;
  background:var(--negro);border:1px solid var(--linea);border-radius:18px;
  overflow:hidden;animation:sube .34s var(--ease);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
@keyframes sube{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

/* barra superior tipo ventana de navegador */
.barra{
  display:flex;align-items:center;gap:7px;
  padding:11px 16px;background:var(--card);border-bottom:1px solid var(--linea);
}
.barra .d{width:9px;height:9px;border-radius:50%;background:#2e2e33}
.barra .url{
  margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:var(--dim);letter-spacing:.02em;
}
.barra .x{
  margin-left:12px;background:none;border:0;color:var(--dim);
  font-size:20px;line-height:1;cursor:pointer;padding:0 2px;
}
.barra .x:hover{color:var(--blanco)}

.cuerpo{padding:28px 26px 26px}

/* progreso */
.prog{margin-bottom:22px}
.prog-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.prog-k{
  font-family:var(--ui);font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);
}
.prog-n{font-family:var(--ui);font-size:12px;font-weight:800;color:var(--blanco)}
.prog-rail{height:3px;background:var(--card-2);border-radius:99px;overflow:hidden}
.prog-fill{display:block;height:100%;width:33%;background:var(--azul);border-radius:99px;transition:width .4s var(--ease)}

.m-t{font-family:var(--ui);font-size:21px;font-weight:800;line-height:1.25;margin-bottom:6px}
.m-s{font-size:14px;color:var(--mute);margin-bottom:20px}

/* campos */
.campo{margin-bottom:15px}
.campo label{
  display:block;font-family:var(--ui);font-size:10.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:7px;
}
.campo input, .campo select{
  width:100%;background:var(--card);border:1px solid var(--linea);
  border-radius:11px;padding:14px 15px;
  color:var(--blanco);font-family:var(--cuerpo);font-size:15.5px;
  transition:border-color .18s,background .18s;
}
.campo input::placeholder{color:#5a5a5e}
.campo input:focus, .campo select:focus{
  outline:0;border-color:var(--azul);background:#101014;
}
.tel{display:flex;gap:9px}
.tel select{width:104px;flex:none;cursor:pointer}
.ayuda{margin-top:7px;font-size:12.2px;color:var(--dim);line-height:1.45}

/* opciones con flecha */
.preg{display:none}
.preg.on{display:block;animation:entra .3s var(--ease)}
@keyframes entra{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.ops{display:flex;flex-direction:column;gap:9px}
.op{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;text-align:left;
  background:var(--card);border:1px solid var(--linea);border-radius:11px;
  padding:15px 16px;color:var(--blanco);
  font-family:var(--cuerpo);font-size:15px;cursor:pointer;
  transition:border-color .16s,background .16s,transform .16s var(--ease);
}
.op:hover{border-color:var(--azul-borde);background:var(--azul-16);transform:translateX(3px)}
.op .fl{color:var(--dim);font-size:15px;flex:none;transition:color .16s,transform .16s}
.op:hover .fl{color:var(--azul);transform:translateX(3px)}
.op.sel{border-color:var(--azul);background:var(--azul-16)}

/* paso 3 · intención */
.op.si{border-color:var(--azul-borde);background:rgba(26,102,255,.11)}
.op.si:hover{background:rgba(26,102,255,.2)}
.op.no{font-size:13.6px;color:var(--mute)}

/* consentimiento */
.consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 16px;font-size:12.8px;color:var(--mute);line-height:1.45}
.consent input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--azul);cursor:pointer}
.consent a{color:var(--mute);text-decoration:underline;text-underline-offset:2px}

.err{color:#FF5A4E;font-size:13px;margin:4px 0 12px;display:none}
.err.on{display:block}

.fino{margin-top:13px;text-align:center;font-size:12.2px;color:var(--dim)}
.atras{
  display:block;margin:16px auto 0;background:none;border:0;
  color:var(--dim);font-family:var(--ui);font-size:12.5px;cursor:pointer;
}
.atras:hover{color:var(--mute)}

/* pantalla de "abriendo" */
.abriendo{display:none;padding:52px 26px;text-align:center}
.abriendo.on{display:block}
.abriendo .ab-bar{height:3px;background:var(--card-2);border-radius:99px;overflow:hidden;margin:0 auto 20px;max-width:230px}
.abriendo .ab-bar i{display:block;height:100%;width:0;background:var(--azul);animation:llena 2.4s var(--ease) forwards}
@keyframes llena{to{width:100%}}
.abriendo .ab-t{font-family:var(--ui);font-weight:800;font-size:17px}
.abriendo .ab-s{font-size:12.5px;color:var(--dim);margin-top:7px;letter-spacing:.08em;text-transform:uppercase}